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