移动WebKit浏览器(铬)地址栏的变化$(窗口).height();制作背景尺寸:盖重新调整每次地址栏、尺寸、浏览器、窗口

2023-09-03 23:32:27 作者:风与水的痕迹

现在的问题是,我有几个DIV的绝对定位具有背景尺寸:盖;和它们的高度由JavaScript的计算,以填补视口的100%。在每个桌面浏览器和移动设备Firefox一切都很好,但在移动Chrome浏览器的地址栏(在出现/消失)的变化$(窗口).height();值。这导致古怪的背景图像重新调整每次做那个时候。有一种解决方法,始终显示地址栏(使窗口的高度值不会改变),或在保持背景的大小一些其他的解决方案:覆盖;地址栏不论规模一样的吗?

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?

推荐答案

我知道你在说Chrome浏览器,但在移动Safari浏览器的情况下,新的IOS 7.1,可以将属性添加到视标签最小-ui这将prevent从弹出进出导航栏和地址栏。

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.

希望在未来的其他浏览器,如Chrome浏览器的移动,也将接受这个值。

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

您可以在这里阅读更多: http://www.mobilexweb.com/blog/ios -7-1野生动物园 - 最小-UI-错误

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