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

Question

我在iPhone设备上遇到了这个问题(iPhone 7,iOS 10,还有其他iPhone):在javascript中,如果我拦截orientationchange事件,在处理程序内部,screen.width和screen.height保持不变(如在轮换之前).

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

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

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

在此先感谢您的帮助.

Answer 1

据我所知,屏幕宽度/高度在旋转后不会在设备中发生变化.要检查设备是否已旋转,您可以阅读这些属性

1. window.orientation:此值从0更改为+ 90/-90
2. window.innerHeight/innerWidth:交换此值
3. document.documentElement.clientHeight/clientWidth:交换此值

不幸的是,这种行为在所有Android/iOS/Window设备上都不一致.我认为在这个图中有很好的解释.

Answer 2

iOS用于返回屏幕大小,就像它是纵向一样.他们在iOS 8(在本地类上)改变了它,但他们可能忘记为Safari做这件事,或者他们可能保持这种兼容性.

如果你想要根据你可以使用的方向的实际尺寸 window.innerWidth和window.innerHeight

无论是否使用视口元标记,我都会得到相同的值

它可以在Chrome模拟可视化中正常工作,因为它会返回模拟可视化的屏幕大小,但它不会根据设备模拟应该运行的操作系统,因此您将无法获得相同的值就像在真实设备上一样(在这种情况下,真实设备不会返回好的值)