Mobile Webkit browser (chrome) address bar changes $(window).height(); making background-size:cover rescale every time

六月ゝ 毕业季﹏ 提交于 2019-11-27 01:41:52

问题


The problem is that I have a few DIV's positioned absolutely which have background-size: cover; and their height is calculated by javascript to fill 100% of viewport. On every desktop browser and mobile firefox everything is fine, but on mobile chrome address bar (upon appearing/disappearing) changes $(windows).height(); value. That results in quirky background image rescaling every time it does that. Is there a workaround to always display address bar (so the window height value wouldn't change), or some other solution in keeping background-size: cover; scale the same regardless of the address bar?


回答1:


I know you are speaking of Chrome, but in the case of mobile Safari, new as of ios 7.1, you can add the attribute to the viewport tag "minimal-ui" and this will prevent the navigation bar and the address bar from popping in and out.

Hopefully in the future other browsers, such as Mobile Chrome, will also accept this value.

You can read more here: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs




回答2:


I solved a similar problem using:

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



回答3:


I wrote a little vanilla JS ES6 npm module to fix the issue:

address-bar-jump-fix

All you have to do is load the module and put a data-attribute on each jumping element.

This is what the script does (simplified):

  • When the user starts scrolling the script saves the initial height of each item that has a certain data-attribute. (data-jump-fix='true')
  • While the user is scrolling and the viewport is resizing, the script prevents the resizing of all selected elements by forcing their initial heights back on them.

The source is compiled to ES5 to support old browsers.




回答4:


I understand this is an older question, but the Chrome team has made a "fix" to this, which should prevent this issue in the future. It's currently in Canary, but it will hopefully end up in stable soon. It's planned for Chrome M56.



来源:https://stackoverflow.com/questions/24479085/mobile-webkit-browser-chrome-address-bar-changes-window-height-making-ba

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!