在移動瀏覽器中滾動時調整背景大小
[英]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.