如何在Phonegap/JQuery mobile中以编程方式查找设备宽度

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尺寸,而不是屏幕尺寸.

另外,您可以检查的宽度data-role="page"元素找到device-width(因为它的设置100%的device-width):

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

希望它可以帮助别人!