How to programmatically find the device-width in Phonegap/JQuery mobile

Question

I need to find the device-width of the mobile device. Although we can specify the content

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

But i need to programmatically obtain the device width to compute some logic in my application. How can I get the device width?

Answer 1

The viewport dimensions can be gathered via the window object:

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

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

Though you won't always get perfect results, different devices behave differently and this gives the viewport dimensions, not the screen dimensions.

Alternatively you could check the width of a data-role="page" element to find the device-width (since it's set to 100% of the device-width):

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

Answer 2

Not sure that the solution proposed works as expected. Are you sure you get the real device-width?

I'm using the following code in my app and it works fine:

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

Hope it can help someone!