在移动浏览器中滚动时调整背景大小
[英]Background resizing on scrolling in mobile browser
问题描述
我正在尝试为我的网站创建背景，它在桌面上运行良好
但是当我在我的移动浏览器（chrome）中滚动时，背景开始调整大小，主要是因为浏览器搜索栏隐藏并在滚动时重新出现。
有什么办法可以防止我的背景调整大小？
这是我的手机上发生的事情的视频： https://streamable.com/0fplj6
这是代码：
html { height: 100vh; margin: 0; width: 100%; } body { margin: 0; height: 100%; ; width: 100%; background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } #header { width: 100%; height: 50px; background-color: black; } #header img { height: 6rem; margin: 1rem; } #content { width: 70%; margin: auto; background: yellow; overflow: hidden; }
<body> <div id="header"></div> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. </div> </body>
我发现了一个类似的问题
https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome
但它已经有 6 年历史了，并且没有一个解决方案有效（在纯 css 中）
那么有什么解决方案最好是纯css？ （如果绝对必要，请使用原版 javascript）
1 个解决方案
解决方案1
1 已采纳 2021-04-13 16:44:12
罪魁祸首是background-position:fixed因为它的大小是浏览器屏幕（减去地址栏区域）
诀窍在于使用粘性背景。
我测试了下面的代码，它不应该在移动浏览器中向下滚动时调整大小
html, body { margin: 0; width: 100%; max-height: 100%; max-width: 100%; } #header { height: 50px; width: 100%; background: black; } #rest { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; background: blue; } #content { width: 50%; z-index: 0; grid-row: 1; grid-column: 1; margin: 0 auto; background: yellow; } #sticky_back { width: 100%; height: 100vh; grid-row: 1; grid-column: 1; position: sticky; top: 0; background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg"); background-repeat: no-repeat; background-size: cover; }
<body> <div id="header"></div> <div id="rest"> <div id="sticky_back"></div> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. </div> </div> </body>
在移动浏览器和调整浏览器窗口大小时显示模式弹出窗口的问题
[英]Problems with displaying modal popups in mobile browser and on resizing browser window
CSS - 滚动后避免在iOS浏览器上调整背景图像的大小
[英]CSS - Avoid resizing of background image on iOS browser after scroll
缩小浏览器窗口时，停止调整Background-img的大小
[英]Stop Background-img from resizing when shrinking the browser window
视差背景的浏览器和移动设备问题（javascript / jquery）
[英]Browser and mobile issues with parallax background (javascript/jquery)
如何检查移动网络浏览器是在移动设备的前台还是后台运行
[英]how to check mobile web browser is running in foreground or background on mobile device
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.