web-dev-qa-db-ja.com

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

モバイルデバイスのデバイス幅を見つける必要があります。コンテンツを指定できますが

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

しかし、アプリケーションでいくつかのロジックを計算するには、プログラムでデバイスの幅を取得する必要があります。デバイスの幅を取得するにはどうすればよいですか？

javascriptjquery-mobilecordova
18
Coder_sLaY

viewport次元は、windowオブジェクトを介して収集できます。

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

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

常に完全な結果が得られるとは限りませんが、デバイスによって動作が異なるため、画面のサイズではなくviewportのサイズになります。

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

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

提案されたソリューションが期待どおりに機能するかどうかはわかりません。実際のデバイス幅を取得してもよろしいですか？

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

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;
}

それが誰かを助けることができることを願っています！

18
PlaTyPuS