window.outerWidth is 0 in Safari on iOS 10 beta

Using an iPad with iOS 10 installed, I entered window.outerWidth in the browser console and got a value of 0. OTOH, window.innerWidth correctly produced 1024 (landscape mode).

In iOS 9, window.outerWidth correctly produced 1024, so is this just a bug in the iOS 10 beta or is there a subtlety to this property that I'm missing?

回答1:

The issue is more than just the iOS 10 Beta, but I doubt it is a priority for Apple Devs to fix as iOS devices don't really have an external frame on the sides of their browser window, so window.innerWidth is the same as window.outerWidth.

To see this working in a different context, you can pop open the inspector in your browser and emulate a smaller device. The inner width will be equal to the page width, while the outer width will be equal to the full width of the open browser.

If you still need to use outerWidth, what you can do as an alternative is either check the screen width using:

let mq = window.matchMedia( "(min-width: 1025px)" );

mq.matches will evaluate to true if you're on a desktop, and you can then use outerWidth for desktop and innerWidth for mobile. Or you could just make an alternative function to do it for you like this:

let screenWidth = () => {
  const mq = window.matchMedia( "(min-width: 1025px)" );

  if (mq.matches) {
    return window.outerWidth;
  } else {
    return window.innerWidth;
  }
}

Note that 1025px is 1 more pixel wide than an iPad Air 2 in landscape orientation.

回答2:

If you're using jQuery in your project, you can use $(window).outerWidth() and $(window).outerHeight(). It's a workaround that works as expected in all devices.