Ipad上的背景圖像不顯示100％

我用於我的背景（已修復）的圖像以Web格式顯示爲100％，但是當我在Ipad（1024x768）上模擬它時，圖像停止適應屏幕寬度僅佔屏幕高度的70％。Ipad上的背景圖像不顯示100％

這是我用過的網站格式的CSS：

.body{ 
    background-image: url("/img/bg.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100% auto; 
    height: 5700px; 
    width: 100%; 
    }

這是我用過的iPad風格的CSS：

@media screen and (max-width: 1024px) { 
.body{ 
    background-image: url("/img/bg.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100% auto; 
    height: 5700px; 
    min-width: 1024px; 
    } 
}

我試着min-width: 1024px;因爲我發現了一個類似的question與該建議，但它沒有奏效。

來源

2017-08-02 Calicorio

可以試試寬度：100vw;？如果有幫助，我會寫一個答案 – RacoonOnMoon

@Traver ok，我現在就試試。 – Calicorio

我試過它在背景大小（不是寬度），它已經工作！謝謝！我會在下面發佈完整的答案。 – Calicorio

如這裏viewport units caniuse所述，使用視口單元可以（並且會）在IOS導致問題，因爲

的iOS 7的Safari重新計算寬度在VH爲VW設置，並且高度在VW爲VH設置，取向的變化時。

iOS 7如果頁面已保留並在60秒後返回，Safari將視口單元值設置爲0。

據報道iOS上的vh包括高度計算中底部工具欄的高度以及vw寬度計算中邊欄（書籤）的寬度。

因此，我建議你使用媒體查詢和目標不同的iOS分辨率爲肖像和風景。我知道，這是一個細緻的任務，但如果你有一個嚴重的項目一個嚴重的客戶，你必須提供嚴重的產品

看到這裏>iosres

例如

/* iPad with portrait orientation.*/ 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){ 
    .body{ 
    height: 1024px; 
    } 
} 


    /*iPad with landscape orientation.*/ 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){ 
    .body{ 
    height: 768px; 
    } 
} 

/*iPhone 5 with aspect ratio*/ 
@media screen and (device-aspect-ratio: 40/71) { 
    .body { 
    height: 500px; 
    } 
}

或者你可以使用jQuery的或JavaScript，例如

$(".body").height($(window).height())

這將等於身高到窗口高度

來源

2017-08-02 12:59:44

哇，謝謝你的信息。由於我正在使用React.js開發項目，因此我無法使用jQuery，但我會做第一個選項。我會將你的答案標記爲最好的答案。 – Calicorio

嘗試使用width: 100vw。 vw表示視口寬度，所以這應該使背景佔據視口的整個寬度。

來源

2017-08-02 11:42:53 Henry

是的，我不得不改變我的單位。我已經完全解釋了我在下面做了什麼。並感謝您的幫助！ :) – Calicorio

到@Traver我已經找到了答案感謝：

.body{ 
    background-image: url("/img/bg.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 200vh; 
    height: 5700px; 
    width: 100%; 
    }

我不得不改變背景大小的單位，VH和刪除自動（但我已經用它過於測試，它的工作）。給它一個200vh的數量就足以將它的整個寬度和高度縮放。

編輯：Mihai T的答案是最好的。覈實。

來源

2017-08-02 11:47:31 Calicorio

Ipad上的背景圖像不顯示100％

回答

相關問題