8

问题是我有一些绝对定位的 DIV，它们有 background-size: cover; 并且它们的高度由 javascript 计算以填充 100% 的视口。在每个桌面浏览器和移动 Firefox 上一切都很好，但在移动 chrome 地址栏上（出现/消失时）会更改 $(windows).height(); 价值。这会导致每次执行此操作时都会重新缩放古怪的背景图像。是否有始终显示地址栏的解决方法（因此窗口高度值不会改变），或保持背景大小的其他解决方案：覆盖；无论地址栏如何，都一样缩放？

4

4 回答 4

1

我知道您说的是 Chrome，但对于移动 Safari，从 ios 7.1 开始，您可以将属性添加到视口标签“minimal-ui”，这将防止导航栏和地址栏弹出出来。

希望将来其他浏览器（例如 Mobile Chrome）也能接受这个值。

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

于 2014-07-16T16:15:53.810 回答
1

我写了一个小香草 JS ES6 npm 模块来解决这个问题：

地址栏跳转修复

您所要做的就是加载模块并在每个跳跃元素上放置一个数据属性。

这就是脚本的作用（简化）：

  • 当用户开始滚动时，脚本会保存具有特定数据属性的每个项目的初始高度。（数据跳转修复='真'）
  • 当用户滚动并且视口正在调整大小时，脚本会通过强制所有选定元素的初始高度来防止调整它们的大小。

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

于 2015-07-21T18:03:13.337 回答
1

我知道这是一个较老的问题，但 Chrome 团队已经对此进行了“修复”，这应该可以防止将来出现这个问题。它目前在 Canary 中，但有望很快稳定下来。计划用于Chrome M56。

于 2016-11-12T02:28:37.183 回答
1

我使用以下方法解决了类似的问题：

$(document).ready(function() {
   var screenHeight = $(window).height();
   $('div_with_background_image').css('height', screenHeight + 'px');
});
于 2016-04-28T16:12:57.770 回答