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。

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

3 个答案: