Here are some CSS media queries useful for targeting various iPhones. Using the device-height and width alone will result in catching other mobile devices, which may be unintended.
Employ the following queries to target iPhones only.

Solid Tip: Use the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> for a proper viewing experience with your smartphone specific styles. There are many content options for the content attribute. See this Google Developer article for more info.

iPhone 5 or 5S

Portrait Landscape
@media only screen 
   and (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation : portrait) {
}
@media only screen 
   and (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation : landscape ) {
}
Either Orientation
@media only screen 
   and (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2) {
}

iPhone 4 or 4S

Portrait Landscape
@media only screen 
   and (device-height : 480px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation : portrait) {
}
@media only screen 
   and (device-height : 480px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation : landscape ) {
}
Either Orientation
@media only screen 
   and (device-height : 480px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2) {
}

iPhone 2G, 3G, or 3GS

Portrait Landscape
@media only screen 
   and (device-height : 480px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 1)
   and (orientation : portrait) {
}
@media only screen 
   and (device-height : 480px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 1)
   and (orientation : landscape ) {
}
Either Orientation
@media only screen 
   and (device-height : 480px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 1) {
}