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?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With