时间戳

首页 > 解决方案 > 切换移动浏览器的地址栏时调整背景图像大小

javascript - 切换移动浏览器的地址栏时调整背景图像大小

问题描述

我有一个带有背景图片的封面：

<div id="cover"></div>

CSS：

#cover {
  height: calc(60vh - 50px);
  height: calc(var(--cover-height, 60vh) - 50px);
  background: url("");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

当地址栏隐藏或显示时，移动浏览器存在问题。背景图像调整大小，我想是因为cover大小试图填充添加/删除的空间，但它会产生非常尴尬的跳跃效果。

我试过这个和这个。都没有奏效。背景图像仍然跳跃。我正在 Android 谷歌浏览器上测试这个。

我尝试了自己的解决方案，但也没有用：

let vh = window.innerHeight * 0.6;
document.documentElement.style.setProperty('--cover-height', `${vh}px`);

这个想法是以像素为单位计算初始高度并将封面的高度设置为该固定值，这样它就不会再次改变，这样背景图像就不会被调整大小。好吧，由于某种原因，我无法弄清楚它只是行不通。跳跃效果依然存在。

标签： javascripthtmlcssmobileresponsive-design

解决方案

推荐阅读