Geek asks and answers

Change viewport based on device resolution

How to change meta viewport based on device resolution? we can use media queries to target different resolution screens, how to set up different types of viewing?

how my demo site works on 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 it

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />
+3
source share
1 answer
//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 that 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');
    }
}
+2
source

More articles:


All Articles