Mobile Safari window reports 980px

Question

Why does this report 980 on the iPhone 4? I thought it would be 960 or 640.

alert($(window).width());

Answer 1

You're getting the default viewport setting. See Apple iOS docs - meta tag and search for 'viewport'.

Property Description

width The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000. You can also set this property to the constants described in “number.” Available in iOS 1.0 and later.

To get the device width, as per the docs:

For example, to set the viewport width to the width of the device, add this to your HTML file:

<meta name="viewport" content="width=device-width" />

Answer 2

Have you tried the following?

alert($(document).width());

Answer 3

In safari the default the window width is 980px, so if your javascript begins executing before the window has loaded the the width will be 980px, even though your viewport meta tag specifies the width as 'device-width'.

If you find that adding the meta tag <meta name="viewport" content="width=device-width" /> doesn't fix your problem, then make sure your Javascript code is executing only after the window has loaded.

In vanilla Javascript:

console.log(window.innerWidth) // might be the default width

window.onload= function () {
  console.log(window.innerWidth) // should now be device width
  //... your code here ...

}

Alternatively, if using jQuery:

console.log(window.innerWidth) // might be the default width

$( document ).ready(function () {
  console.log(window.innerWidth) // should now be device width
  //... your code here ...
})