18

I'm experiencing this problem on an iPhone device (iPhone 7, iOS 10, but also other iPhones too): in javascript, if I intercept the orientationchange event, inside the handler, screen.width and screen.height remain the same (as before rotation).

Since this may depend from the viewport settings, this is how my viewport is declared in the .html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" />

Everything works fine in Chrome's simulated visualization.

Thanks in advance for your help.

friol
  • 6,996
  • 4
  • 44
  • 81

5 Answers5

18

As far as I know screen the width/height will not change in the device after rotation. To check if the device is rotated you could read these properties

  1. window.orientation: This value change from 0 to +90/-90
  2. window.innerHeight/innerWidth: These values are swapped
  3. document.documentElement.clientHeight/clientWidth: These values are swapped

Unfortunately, this behavior is not consistent across all Android/iOS/Window devices. I think it's pretty explained in this figure .

dloeda
  • 1,516
  • 15
  • 23
  • `window.orientation` can be **180** on iPad when holding upside down. – Barnee Mar 01 '18 at 08:43
  • 2
    I always get the old value of window.innerHeight/innerWidth even after rotation. window.addEventListener("orientationchange", ()=>{ console.log(window.innerHeight)}) it will print the old value... – zzzgoo Feb 22 '19 at 06:59
  • https://stackoverflow.com/questions/12452349/mobile-viewport-height-after-orientation-change refert to this – zzzgoo Feb 23 '19 at 08:10
  • what do you mean by the values are swapped ? Will the window.innerWidth will be updated after the rotation ? – Olivier Boissé Nov 11 '20 at 12:27
  • @OlivierBoissé exactly – dloeda Nov 12 '20 at 13:08
7

iOS used to return the size of the screen as if it was in portrait. They changed it on iOS 8 (on the native classes), but they might have forgotten to do it for Safari, or maybe they kept it that way for compatibility.

If you want the real size based on the orientation you can use window.innerWidth and window.innerHeight

I get the same values with or without the viewport meta tag

It works fine on Chrome simulated visualization because it return the screen size of the simulated visualization, as it should be, but it doesn't simulate the OS where it should be running based on the device, so you won't get the same values as on a real device (in this case in which the real device doesn't return good values)

jcesarmobile
  • 51,328
  • 11
  • 132
  • 176
1

CSS can't detect the orientation change.

Use JavaScript to get the orientation change.

Add the function as

window.addEventListener("orientationchange", function() {
  document.body.style.width = window.innerWidth;
});

This will add an event Handler to window to change the width of body when the orientation is changed.

More reference on orientationchange

Sagar V
  • 12,158
  • 7
  • 41
  • 68
0

jQuery mobile has onOrienntetionChange event that handle orientation changing event,and there is $(window).orientationchange(); function to change orientation manually.

Yashar Aliabbasi
  • 2,663
  • 1
  • 23
  • 35
0

Considering that it is a behavior for mobile and iOS devices, this function maybe can help you. Validates the device, orientation and operating system.

import isMobile from 'ismobilejs'
/* For practical example: @see: https://www.npmjs.com/package/ismobilejs */
function windowSize() {
    let [_width, _height] = [window.innerWidth, window.innerHeight]
    // detect if device is mobile or tablet
    if (isMobile(window.navigator).any) {
        [_width, _height] = [window.screen.width, window.screen.height]
        // detect if device is iOS and horizontal orientation
        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
            // Horizontal orientation are equal to -90 or 90 degrees
            if (Math.abs(window.orientation) == 90) {
                _width = window.screen.height
                _height = window.screen.width
            }
        }
    }
    return {
        width: _width,
        height: _height
    }
}

Call this function when orientation change on mobile, or window resize on desktop.

let _windowSize = windowSize() // Return { width: realWidth, height: realHeight }
if (isMobile(window.navigator).any) {
    window.addEventListener("resize", () => { _windowSize = windowSize() })
} else {
    window.addEventListener("orientationchange", () => { _windowSize = windowSize() })
}
GuybrushThreepwood
  • 153
  • 6