Question

How to change the meta viewport based on device resolution? we can use media queries to target different resolution screens how can set different viewport?

like my demo site works ok in iPad with this meta tag

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1, maximum-scale=1, minimum-scale=1" />

but for iphone4 I need this

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />

Answer 1

//test for iOS retina display
$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");

Docs: http://jquerymobile.com/demos/1.0a4.1/#docs/api/mediahelpers.html

UPDATE:

After looking for a minute I found the jQuery can change the meta tag.

Try something like this:

// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
    // Check for iPhone4 Retina Display
    if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}