I am building a Phonegap application with two layouts: one for 'handhelds' and one for 'tablets.' I want devices larger than 6 inches to display the tablet layout and smaller devices to use the handheld layout.
I've looked into media queries. My concern is that if I target a device by pixel size, for example iPad1 768px, a high-density handheld will come along that also qualifies for this query, showing the wrong layout and making the text unreadable and the widgets too small. I've considered webkit-min-device-pixel-ratio > 2 for this query, but doesn't that leave 'gaps' where an unfortunate combination of resolution and pixel ratio triggers the tablet template on a handheld device?
So, what is a general strategy I could follow to reliably 'pick one' of these two layouts (and avoid overlaps between devices) when the device loads? I am only supporting portrait mode and I can change all CSS, JS, <meta name="viewport"> etc..
Essentially, I'd like to be able to come up with some rules to differentiate between columns 2 and 3 here http://nmsdvid.com/snippets, but without targeting specific device models.
Thanks!
I think pixel width in media queries are still standard width, all current iphones display a document width of 320px. This is as the UIwebview used in phonegap is just a standard browser environment.
My css needs depend on the amount of cross over between my iphone and Ipad versions of my app. If the css is almost the same I will just have extra css for Ipad devices in the one CSS file using a media query, otherwise I will have a different file for each.