移动Webkit浏览器(chrome)地址栏更改$(window).height(); 制作背景大小:每次都重新resize

问题是,我有几个DIV的绝对定位,其中有背景大小:封面; 并通过javascript来计算它们的高度来填充100%的视口。 在每一个桌面浏览器和手机的Firefox一切都很好,但在移动铬地址栏(出现/消失)改变$(窗口).height(); 值。 这会导致每次都这样做的背景图像重新缩放。 是否有一个解决方法总是显示地址栏(所以窗口高度值不会改变),或其他一些解决scheme保持background-size:cover; 不pipe地址栏如何缩放?

Solutions Collecting From Web of "移动Webkit浏览器(chrome)地址栏更改$(window).height(); 制作背景大小:每次都重新resize"

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

希望未来其他浏览器(例如Mobile Chrome)也会接受这个价值。

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

我解决了类似的问题,使用:

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

我写了一个小小的香草JS ES6 NPM模块来解决这个问题:

地址栏跳修复

所有你需要做的就是加载模块,并在每个跳转元素上放置一个数据属性。

这就是脚本的function(简化):

  • 当用户开始滚动时,脚本保存每个具有特定数据属性的项目的初始高度。 (数据跳修复=“真”)
  • 当用户正在滚动并且视口正在resize时,该脚本通过将其初始高度强制重新设置来防止所有选定元素的大小调整。

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

我知道这是一个比较老的问题,但是Chrome团队已经对此做了一个“修复”,这将在未来避免这个问题。 目前在加那利,但有望最终稳定。 这是计划在Chrome M56 。