Mobile Phone 地址栏丢掉 Fixed Position

Question

我通过在这样的元素上创建固定位置的背景来创建视差图像：

#element:before {
    content: '';
    background: url('sample.jpg') no-repeat;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
    background-position: 68% center;
    transform: translate3d(0,0,0);
}

效果很好，但我注意到，当在移动设备上 phone 看到地址栏时，它实际上打乱了我的固定元素的定位。有谁知道如何避免这种情况？

谢谢

Answer 1

position: fixed 在移动浏览器中存在一些问题。不幸的是，由于这些问题，通常最好避免使用它。 Here is an article that outlines these problems in more detail.

基本上，您应该尝试使用 position: absolute。

Answer 2

这可以通过动态改变 before 元素的高度来解决：

在页面上，只有一个带有目标 ID 的空白样式标签：

<style id="values-styles" type="text/css">

</style>

然后JS/jQuery:

var valuesStyles = jQuery('#values-styles');

// since window resize is called when the address bar is shown or hidden
jQuery(window).resize(function() {
valuesStyles.html("#values:before { height:" + jQuery(window).height() + "px;}");
});

完美运行！

Answer 3

对我来说最好的解决方案我将 100vh 更改为 100%

你可以看看Here is an article that best solution

Mobile Phone 地址栏丢掉 Fixed Position

Mobile Phone Address bar throwing off Fixed Position

html

css

parallax