Question

After putting the meta name="viewport" content="width=device-width" tag in the head of my HTML file, I am getting 320 from $(window).width() in portrait mode on my iPhone 4. This is what I expected, and matches what I get from here: http://responsejs.com/labs/dimensions/ (this link was provided in another, similar, discussion on SO).

However, when I switch to landscape mode, $(window).width() continues to return 320, whereas the response.js page linked to earlier claims that $(window).width() returns 480. Out of all the "width"-based, Viewport variables listed on that response.js page (except those which depend on response.js, which I'm not using) I get 320 from all of them except window.outerWidth, which is 480. However, every single one returns 480 on that response.js page.

What am I missing here? I looked through the source of that response.js page and they simply seem to be calling $(window).width() as I am, so I'm quite mystified.

Was it helpful?

Solution

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

Add that instead, I've tested it on my iPhone and it's output is correct. Tested it with

$(window).width();
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top