cordova - Separate CSS Templates for Phonegap Mobile Application -

i building phonegap application 2 layouts: 1 'handhelds' , 1 'tablets.' want devices larger 6 inches display tablet layout , smaller devices use handheld layout.

i've looked media queries. concern if target device pixel size, example ipad1 768px, high-density handheld come along qualifies query, showing wrong layout , making text unreadable , widgets small. i've considered webkit-min-device-pixel-ratio > 2 query, doesn't leave 'gaps' unfortunate combination of resolution , pixel ratio triggers tablet template on handheld device?

so, general strategy follow reliably 'pick one' of these 2 layouts (and avoid overlaps between devices) when device loads? supporting portrait mode , can change css, js, <meta name="viewport"> etc..

essentially, i'd able come rules differentiate between columns 2 , 3 here http://nmsdvid.com/snippets, without targeting specific device models.

thanks!

i think pixel width in media queries still standard width, current iphones display document width of 320px. uiwebview used in phonegap standard browser environment.

my css needs depend on amount of cross on between iphone , ipad versions of app. if css same have css ipad devices in 1 css file using media query, otherwise have different file each.