移动Webkit浏览器（Chrome）的地址栏更改$(window).height();使背景尺寸：cover每次重新缩放。

Question

问题是我有几个div的位置是绝对定位的，它们具有"background-size: cover;"属性，其高度由javascript计算以填充100%的视口。在每个桌面浏览器和移动版Firefox上一切正常，但在移动版Chrome上地址栏（出现/消失时）会改变$(windows).height();值。这导致背景图像每次都会出现奇怪的重新缩放。是否有一种解决方法可以始终显示地址栏（因此窗口高度值不会改变），或者通过其他解决方案保持background-size: cover;缩放相同，而不考虑地址栏？

- Treavis

Answer 1

我写了一个小型的原生 JS ES6 npm 模块来解决这个问题: address-bar-jump-fix 你所需要做的就是加载该模块并在每个跳动元素上放置一个数据属性。

以下是该脚本的操作（简化）：

- 当用户开始滚动时，脚本保存具有特定数据属性的每个项目的初始高度。（data-jump-fix = 'true'） - 当用户滚动并且视口正在调整大小时，该脚本通过将它们的初始高度强制还原到所有选定元素上来防止选择元素的调整大小。

源代码已编译为 ES5 以支持旧版浏览器。

- Rotareti

Answer 2

我使用以下代码解决了类似的问题：

$(document).ready(function() {
   var screenHeight = $(window).height();
   $('div_with_background_image').css('height', screenHeight + 'px');
});

- littlequest

Answer 3

我知道你在谈论Chrome，但是对于移动Safari来说，自iOS 7.1起，您可以向viewport标签添加属性"minimal-ui"，这将防止导航栏和地址栏弹出和消失。

希望未来其他浏览器，比如移动版Chrome，也能接受这个值。

你可以在这里阅读更多信息： http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

- skribbz14

---

iOS 8已经移除了对“minimal-ui”的支持。 - Mike Monteith

无论这是否已被弃用，此答案仅适用于特定的浏览器和设备，因此无法解决其他浏览器和/或其他设备中的问题。 - Benjamin Intal

Answer 4

我知道这是一个旧问题，但Chrome团队已经对此进行了“修复”，这应该可以防止未来出现这个问题。目前它已经在Canary版本中实现，但希望它很快也能在稳定版本中使用。计划在Chrome M56中推出。

- mattrick

---

有趣。我目前在我的三星Galaxy s4上运行Chrome 57.0.2987.132，遇到了这个问题。我打算尝试一个解决方法，在滚动事件中获取window.innerHeight，看看是否可以解决我的高度计算问题。 - Eggs