更改设备方向不会交换宽度和高度

Question

我正在尝试设置背景图像的大小以在调整窗口大小时匹配屏幕大小。 问题是当我改变移动方向时宽度和高度不会改变它们的值。 当我在桌面浏览器的开发工具中测试它时，它可以工作，但是在几个移动浏览器中测试时，虽然方向确实改变了，但措施没有。

这是基本的js：

$(function() {

    function resizeBackground() {
        $('#background-image').height(screen.height);
    }

    resizeBackground();
    $(window).resize(resizeBackground);

});

不幸的是，由于 iOS 上的一个奇怪的 vh 错误，我被迫使用 JS。 这里的问题是，当某些浏览器（特别是 Chrome 和 Firefox）的浏览器地址栏隐藏时，背景图像会跳转。 这里有详细说明： stackoverflow.com/questions/24944925/ 。

Answer 1

总结我的评论，我想描述为什么您的解决方案不起作用：

window.screen.height和window.screen.width您提供设备的实际高度和宽度，并且这些值不会在页面调整大小或方向更改时发生变化。

对于视口大小（您实际上需要视口），适当的方法（变量）是window.outerWidth和window.outerHeight （在某些情况下window.innerWidth和window.innerHeight也可以使用）。

要获取实际文档大小（html 文档），请使用document.documentElement.clientWidth和document.documentElement.clientHeight 。

为了检测方向变化，我建议orientationchange事件而不是onresize事件，因为例如显示键盘时onresize也会触发。

Answer 2

这些移动浏览器应该支持更具体的orientationchange事件。 也许他们只是触发那个而不是调整大小。 也尝试处理orientationchange。

window.addEventListener('orientationchange', resizeBackground);

Answer 3

对于 Mobile Safari，您可以检查window.orientation ，如果它是 90/-90，请为您的“高度”选择较小的宽度/高度。 当方向为 0 时，则选择较高的值。 我现在观察到，当直接在横向中打开 Mobile Safari 时，值会交换并且不会在方向改变时交换。 由于window.orientation已被弃用，它只能用于 Mobile Safari。 对于其余的，我们使用window.screen.orientation.angle 。