Html 如何防止移动设备上固定封面背景图像的大小调整
我想有一个全屏，固定，在一个网站的标题响应背景图像。我有一些css可以在桌面浏览器上正常工作，但在android上的chrome上，当浏览器地址栏显示/隐藏时，在网站上滚动会导致图像移动/调整大小 目前，我使用100vh作为收割台的高度，带有Html 如何防止移动设备上固定封面背景图像的大小调整,html,css,Html,Css,我想有一个全屏，固定，在一个网站的标题响应背景图像。我有一些css可以在桌面浏览器上正常工作，但在android上的chrome上，当浏览器地址栏显示/隐藏时，在网站上滚动会导致图像移动/调整大小 目前，我使用100vh作为收割台的高度，带有背景附件：固定和背景尺寸：封面。根据我在下面的链接中读到的内容，100vh的大小应该始终与地址栏是隐藏的一样 我还尝试使用javascript获取初始视口高度，并将标题高度设置为该值。它似乎也不起作用 下面是一个非常简单的示例，我还将其上传到了一个，以便于在
背景附件：固定和背景尺寸：封面
。根据我在下面的链接中读到的内容，100vh的大小应该始终与地址栏是隐藏的一样
我还尝试使用javascript获取初始视口高度，并将标题高度设置为该值。它似乎也不起作用
下面是一个非常简单的示例，我还将其上传到了一个，以便于在手机上查看：
<html>
<head>
<style>
html,
body {
margin: 0;
}
.background {
background-image: url(./image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
</style>
</head>
<body>
<header class="background"></header>
<h1>Should not resize on mobile scroll</h1>
</body>
</html>
html，
身体{
保证金：0；
}
.背景{
背景图片：url（./image.jpg）；
背景附件：固定；
背景重复：无重复；
背景尺寸：封面；
高度：100vh；
}
不应在移动卷轴上调整大小
为.background
元素指定一个绝对位置，并在
中添加一个边距：
html，
身体{
保证金：0；
}
.背景{
背景图片：url（./image.jpg）；
背景附件：固定；
背景重复：无重复；
背景尺寸：封面；
高度：100vh；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
h1{
边际上限：100vh；
}
不应在移动卷轴上调整大小
您可以使用背景大小：100%
在所有设备中调整背景图像的大小当在android ChromeInterest上滚动时，仍然会触发图像的调整。我看看能不能弄明白。