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');​​​