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

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 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 ...
})