デバイス解像度に基づいてビューポートを変更する

Question

デバイス解像度に基づいてメタビューポートを変更するにはどうすればよいですか？メディアクエリを使用して異なる解像度のスクリーンをターゲットにすることができます。どのようにして異なるビューポートを設定できますか？私のデモサイトのような

はこのmetaタグ

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

でのiPadで[OK]を動作しますが、iPhone4のために、私はこの

<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)"); 

ドキュメント必要があります。http://jquerymobile.com/demos/1.0a4.1/#docs/api/mediahelpers.html

UPDATE：

を

jQueryがメタタグを変更できることが分かった後、分かりました。

このような何か試してみてください：

// 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'); 
    } 
}