Как программно найти ширину устройства в Phonegap/JQuery mobile

Мне нужно найти ширину устройства для мобильного устройства. Хотя мы можем указать контент

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

Но мне нужно программно получить ширину устройства, чтобы вычислить некоторую логику в моем приложении. Как получить ширину устройства?

Ответ 1

Размеры 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');

Ответ 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;
}

Надеюсь, это поможет кому-то!