时间戳

首页 > 解决方案 > 如何阻止固定页面背景在移动设备上跳转

html - 如何阻止固定页面背景在移动设备上跳转

问题描述

我有一个完整的页面高度和宽度背景图像到一个页面，该页面旨在覆盖视口的背面，该视口也适应视口的大小。当您向下滚动背景图像跳转（如下所示）时，当地址栏和导航栏被隐藏（默认浏览器行为）时，这在桌面上工作得非常出色 - 但是在移动设备（iPhone 和 Android）上：

https://ibb.co/7jWLqWh

我为此使用的代码是：

HTML：

<div id="bg">
  <img src="../../assets/landing-page/bg.png" alt="">
</div>

CSS：

#bg {
      position: fixed; 
      top: -32%; 
      left: -90%; 
      width: 200%; 
      height: 200%;
      background-color: #FFFFFF;
    }
    
    #bg img {
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        margin: auto; 
        min-width: 50%;
        min-height: 50%;
        opacity: 0.75;
    }

标签： htmlcss

解决方案

在使用 % 值时，当由于浏览器栏消失而突然有更多空间时，大小会突然跳跃。

为了解决这个问题，供应商决定修复 vh 高度单位。虽然这可能会导致其他问题，例如当进入网站时，全高 100vh div 的底部被截断，但它旨在帮助缓解此处看到的那种滚动跳转问题。

建议您尝试以 vh 单位而不是 %s 定义高度，以查看是否可以解决问题。

推荐阅读