18

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?

michaelmichael
  • 13,755
  • 7
  • 54
  • 60
coderslay
  • 13,960
  • 31
  • 73
  • 121

2 Answers2

41

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');​​​
Jasper
  • 75,717
  • 14
  • 151
  • 146
18

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!

PlaTyPuS
  • 385
  • 3
  • 15
  • this a great function. this helped me. but to get the good width for me I reverse : var deviceWidth = window.orientation == 0 ? window.screen.height : window.screen.width; – Mimouni Aug 06 '15 at 15:30
  • Works great! I also needed to reverse the conditional statement like llyas mentioned and then it works. – finitenessofinfinity Aug 08 '15 at 10:58