关于javascript：screen.width / screen.height在屏幕旋转后不会更新


screen.width/screen.height not updating after screen rotation

我在iPhone设备(iPhone 7，iOS 10，还有其他iPhone)上遇到此问题：在javascript中，如果我截取了directionchange事件，则在处理程序中，screen.width和screen.height保持不变(与 旋转之前)。

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

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

Chrome的模拟可视化效果一切正常。

在此先感谢您的帮助。

相关讨论

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

  • window.orientation：此值从0更改为+ 90 / -90
  • window.innerHeight / innerWidth：交换此值
  • document.documentElement.clientHeight / clientWidth：交换此值

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

    相关讨论

    iOS曾经返回屏幕大小，就好像它是纵向屏幕一样。
    他们在iOS 8(本机类)上对其进行了更改，但他们可能忘记了为Safari做，或者为了兼容而保留了它。

    如果您想要基于方向的实际尺寸，则可以使用
    window.innerWidth和window.innerHeight

    无论是否带有视口元标记，我都会得到相同的值

    它可以在Chrome模拟可视化效果上正常工作，因为它可以按原样返回模拟可视化效果的屏幕尺寸，但是它不会根据设备模拟要在其上运行的OS，因此您不会获得相同的值就像在真实设备上一样(在这种情况下，真实设备不会返回正确的值)

    CSS无法检测方向变化。

    使用JavaScript获取方向更改。

    将功能添加为

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

    更改方向时，这会将event Handler添加到window以更改body的width。

    关于orientationchange的更多参考

    jQuery mobile具有onOrienntetionChange事件来处理方向更改事件，并且具有$(window).orientationchange();函数来手动更改方向。