為什麼當網址列隱藏時，我的全螢幕背景圖片在行動 Chrome 上會跳轉？-css教學-PHP中文網

網址列上的背景圖片偏移在iOS/Android/Mobile Chrome 隱藏

問題

解決方案

其他注意事項

首頁

web前端

css教學

為什麼當網址列隱藏時，我的全螢幕背景圖片在行動 Chrome 上會跳轉？

Patricia Arquette

Dec 17, 2024 am 06:06 AM

Why Does My Full-Screen Background Image Jump on Mobile Chrome When the Address Bar Hides?

網址列上的背景圖片偏移在iOS/Android/Mobile Chrome 隱藏

問題

使用CSS 開發響應式網站時，包括完整的- 螢幕背景圖像在兩個div 之間旋轉和淡入淡出，出現意外行為：在iOS Safari、Android瀏覽器上向下捲動時，背景圖像會輕微跳躍，或 Android Chrome。這是由於網址列隱藏並因此調整背景 div 的大小而導致的，背景 div 的大小已固定並設定為 100% 高度。

解決方案

要解決此問題，存在兩種可能的解決方案:

將#bg1 和#bg2 高度設定為100vh: 這個解決方案理論上很優雅，使用視口高度來設定合適的高度。但是，iOS 有一個 vh bug 影響了這個解決方案。
使用 JavaScript 設定靜態高度：視口大小由 JavaScript 決定時不受網址列影響。因此，JavaScript 可以根據視窗大小設定背景 div 的靜態高度。由於其非純 CSS 性質以及頁面載入時輕微的圖片跳轉，這不是一個理想的解決方案，但考慮到 iOS 的 vh bug，它是可行的。

使用以下JavaScript 程式碼將調整背景動態高度：

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

其他注意事項

雖然上述解決方案有效地防止了背景大小調整，但它可能當使用者向下捲動時會產生明顯的間隙。此間隙是由於將背景高度與螢幕匹配減去 URL 欄高度而產生的。透過在高度上增加60px 可以解決這個問題，但這意味著當URL 欄存在時，背景圖像的底部60px 將不可見：

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

值得注意的是，這些調整大小iOS 和Android中的URL 欄因其對網站功能的影響而引起人們的注意。儘管它們的目的已被理解，但它們的行為可能會對基於 CSS 的設計帶來意想不到的挑戰。

以上是為什麼當網址列隱藏時，我的全螢幕背景圖片在行動 Chrome 上會跳轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Laravel 教程

1602

PHP教程

1505

276

Related knowledge

造型與CSS不同訪問的鏈接 Jul 11, 2025 am 03:26 AM

設置訪問過鏈接的樣式能提升用戶體驗，尤其在內容密集型網站中幫助用戶更好導航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出於隱私限制僅允許修改部分屬性；3.顏色選擇應與整體風格協調，避免突兀；4.移動端可能不顯示該效果，建議結合其他視覺提示如icon輔助標識。

顯示：內聯，顯示：塊和顯示：內聯塊之間有什麼區別？ Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizontalpadding/margins—idealforinlinetextstyling

如何使用CSS創建響應式圖像？ Jul 15, 2025 am 01:10 AM

要使用CSS創建響應式圖片，主要可通過以下方法實現：1.使用max-width:100%和height:auto讓圖片在保持比例的同時自適應容器寬度；2.結合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控製圖片裁剪與焦點展示。這些方法共同確保圖片在不同設備上清晰、美觀地呈現。

什麼是常見的CSS瀏覽器不一致？ Jul 26, 2025 am 07:04 AM

不同瀏覽器對CSS解析存在差異，導致顯示效果不一致，主要包括默認樣式差異、盒模型計算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認樣式處理不一致，解決方法是使用CSSReset或Normalize.css統一初始樣式；2.舊版IE的盒模型計算方式不同，建議統一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現有差異，應多測試並使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse並提供降級

描述'不透明度”屬性 Jul 15, 2025 am 01:23 AM

opacity是CSS中用於控制元素整體透明度的屬性，取值範圍為0（完全透明）到1（完全不透明）。 1.常用於圖片hover淡出效果，通過設置opacity過渡增強交互體驗；2.製作背景遮罩層提昇文字可讀性；3.控制按鈕或圖標在禁用狀態下的視覺反饋。需注意它會影響所有子元素，且與rgba不同，後者僅影響指定顏色部分。搭配transition可實現平滑動畫，但頻繁使用可能影響性能，建議結合will-change或transform使用。合理應用opacity能增強頁面層次感和交互性，但應避免干擾用戶

什麼是口音色的物業？ Jul 26, 2025 am 09:25 AM

accent-color是CSS中用於自定義復選框、單選按鈕和滑塊等表單元素高亮顏色的屬性；1.它直接改變表單控件選中狀態的默認顏色，如將復選框的藍色勾選標記改為紅色；2.支持的元素包括type="checkbox"、type="radio"和type="range"的輸入框；3.使用accent-color可避免複雜的自定義樣式和額外DOM結構，保持原生可訪問性；4.現代瀏覽器普遍支持，舊瀏覽器需降級處理；5.設置accent-col

描述`：has（）`pseudo-class（父挑選器） Jul 15, 2025 am 12:32 AM

The:has()pseudo-classinCSSallowstargetingaparentelementbasedonitschildelements.Itworksbyusingthesyntaxparent:has(child-selector)toapplystylesconditionally.Forexample,div:has(img)appliesstylestoadivcontaininganimage.Multipleselectorscanbeusedwithcomma

了解CSS盒裝屬性：Content-Box與Border-Box Jul 12, 2025 am 03:21 AM

為什麼設置了100px寬度的盒子會顯示更寬？因為默認使用的是content-box模型，實際寬度包括內容、padding和border。 1.默認情況下，box-sizing是content-box，設置的width僅指內容區域，padding和border會額外增加整體寬度；2.使用border-box可讓設定的width包含內容、padding和border，佈局更直觀；3.推薦全局設置box-sizing:border-box，避免佈局錯位，尤其適合響應式設計；4.特殊場景下可使用conte

See all articles

為什麼當網址列隱藏時，我的全螢幕背景圖片在行動 Chrome 上會跳轉？

網址列上的背景圖片偏移在iOS/Android/Mobile Chrome 隱藏

問題

解決方案

其他注意事項

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題