Phonegap/JQueryモバイルでデバイスの幅をプログラムで見つける方法

Question

モバイルデバイスのデバイス幅を見つける必要があります。 我々はコンテンツ

<meta name="viewport" content="width=device-width; user-scalable=no" /> 

を指定することができますが、私はプログラム的に自分のアプリケーションにいくつかのロジックを計算するために、デバイスの幅を取得する必要がありますが。デバイスの幅はどのように取得できますか？

Answer 1

viewport寸法はwindowオブジェクトを介して収集することができます：あなたは、常に完璧な結果を得ることはありませんけれども

var viewport = { 
    width : $(window).width(), 
    height : $(window).height() 
}; 

//can access dimensions like this: 
//viewport.height 

、異なるデバイスは異なる動作をし、これはviewport寸法ではなく、画面の大きさを与えます。

別の方法としては、（それがdevice-widthの100%に設定されていますので）device-widthを見つけるために、data-role="page"要素の幅を確認することができます：

var deviceWidth = 0; 
$(window).bind('resize', function() { 
    deviceWidth = $('[data-role="page"]').first().width(); 
}).trigger('resize');​​​ 

Answer 2

ない期待通りに解決策が作品を提案していることを確認してください。実際のデバイス幅を取得してもよろしいですか？

私は私のアプリに次のコードを使用していますし、それが正常に動作します：

function effectiveDeviceWidth() { 
    var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height; 
    // iOS returns available pixels, Android returns pixels/pixel ratio 
    // http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html 
    if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) { 
     deviceWidth = deviceWidth/window.devicePixelRatio; 
    } 
    return deviceWidth; 
} 

は、それが誰かを助けることを願って！