屏幕旋转后screen.width/screen.height不更新

问题描述

我在iPhone设备(iPhone 7，iOS 10，还有其他iPhone)上遇到此问题:在javascript中，如果我截取了directionchange事件，则在处理程序中，screen.width和screen.height仍然是相同(与轮换之前一样).

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

由于这可能取决于视口设置，因此这是在.html文件中声明我的视口的方式:

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" />

在Chrome的模拟可视化中一切正常.

Everything works fine in Chrome's simulated visualization.

预先感谢您的帮助.

推荐答案

据我所知，屏幕旋转后宽度/高度在设备中不会改变.要检查设备是否旋转，您可以阅读以下属性

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 :此值从0更改为+ 90/-90
2. window.innerHeight/innerWidth :此值已交换
3. document.documentElement.clientHeight/clientWidth :此值已交换

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

不幸的是，此行为在所有Android/iOS/Window设备上均不一致.我认为此图中已经对此进行了很好的解释.

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

这篇关于屏幕旋转后screen.width/screen.height不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！