Regardless of the reason when developing hybrid apps with Phonegap / xcode you may need to target specific IOS devices with media queries. I wanted to share a little bit of my own approach on this subject and try to make this drop dead simple to understand. This does have a bit to do with responsive design but I’m not going to harp on it.  The queries below are primarily for leveraging a portrait design over a landscape. As a side note Landscape media queries in IOS 7 as of this writing actually report the wrong size.

HOW DO I MAKE THIS WORK IN PHONEGAP/CORDOVA?

These media queries can be used in a mobile html page as well for Safari browser. You can also test these using the new emulation mode int the latest version of google chrome.
L
et’s assume you are building a single or multi-page app.

It’s always good to start out with the correct meta tag.  As of now most people tend to use the following meta tag at the top of their app. The newer target-density
helps to pinpoint those displays with higher density.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0,user-scalable=0, target-densityDpi=device-dpi" />

So here without further delay is my media query css breakdown.

/* IPHONE IPAD DEVICE MEDIA QUERIES */

/* IPHONE 3 ONLY */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1) {

/* YOUR CUSTOM STYLE */

}

/* IPHONE 4 ONLY */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {

/* YOUR CUSTOM STYLE */

}

/* IPHONE 5 ONLY */

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {

/* YOUR CUSTOM STYLE */

}

/* IPAD 1, 2, Mini – Non Retina */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {

/* YOUR CUSTOM STYLE */

}

/* IPAD 3, 4, AIR Retina */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {

/* YOUR CUSTOM STYLE */

}

A couple of things to note.

  • Make sure you put your style blocks inside the media blocks. It’s really easy to mess up your syntax and then start to see cross media syntax bleeding into other devices.
  • To test that the media query & css are working as planned in my app I typically setup a series of divs and in the block above change the background of the content in the div. If the content changes on the device as you expected it to you are good to go!
  • In some situations IOS browser will be finicky so you may have to use !important to make sure your particular style definition renders.