css:滿版背景圖片置中/網頁版、手機版顯示不相同

  • 10573
  • 0
  • css
  • 2017-08-04

滿版背景圖片置中問題

在測試圖書管理系統網頁時,發現到用chrome的手機檢視模式,頁面都很正常
但實際拿手機檢測時,卻發現跑版的問題
如下圖
 

 

 

 

 

 

 

 

 

 

      ^這是在chrome的手機檢視模式                   ^這是手機檢視(用chrome開啟)

^網頁版斷點測試

css cod

body {
  background-image: url("/background/background.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

在手機檢視時,背景圖片就會跑位
不會乖乖在中央展開
測試過各種品牌的Andrews手機
都發生同樣的情況
(手邊沒有iOS手機,就沒有測試到)
 

可是偏偏在chrome的手機檢視模式卻都沒有問題
這樣超級麻煩的啊!!!
手機版chrome又無法直接檢視除錯
只好求助業界朋友
介紹手機遠端debug工具

網址如下
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

設定好開始debug
結果問題非常簡單

html {
  height: 100%; }

body {
  background-image: url("/background/background.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

只要在html設定 height:100%
就可以解決在手機版背景圖片沒有滿版置中的問題