3

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" />
coure2011
  • 40,286
  • 83
  • 216
  • 349

1 Answers1

2
//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');
    }
}
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
  • ok I can detect the media but how to change viewport's content? – coure2011 Jun 02 '11 at 17:06
  • @hotshot309 here are the updated docs for this: http://jquerymobile.com/demos/1.1.0/docs/api/mediahelpers.html Looks like you might need to use respond.js https://github.com/scottjehl/Respond – Phill Pafford Jul 11 '12 at 19:36