在移動Safari（iOS 5），風景和肖像中修復和居中背景圖像

我知道這樣的問題已經在這裏提出，但很多現有問題的答案已經過時。我需要的是以下內容：一個最好只有CSS和HTML的網頁，它有一個固定和居中的背景圖像。我使用的背景圖像的尺寸是1024x1024，其思想是圖像將以橫向和縱向模式覆蓋屏幕。背景圖像也必須是固定的，這意味着如果頁面上的內容滾動，則背景圖像不會隨內容一起滾動。在移動Safari（iOS 5），風景和肖像中修復和居中背景圖像

我有一個解決方案，近作品：

CSS：

#background { 
    background-image: url('background.jpg'); 
    background-position:center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    z-index: 0; 
}

HTML：

<body> 
    <div id="background"></div> 
    <!-- content here --> 
</body>

此方法適用於在肖像模式下的罰款;固定和中心都工作正常。但是當我將ipad轉換爲橫向模式時，背景圖像不會立即調整大小以填充新的寬度，insead會在右側顯示白色垂直條紋。當我滾動內容時，背景圖像將調整大小並正確填充寬度。

有誰知道爲什麼調整背景大小隻發生在頁面內容滾動時，有誰知道如何讓這個工作正常？我只對在iOS 5中工作感興趣，所以答案不需要考慮其他瀏覽器或iOS 4。

來源

2012-07-01 BruceHill

我想我可以幫忙。我也是手機設計的新手，但遇到了移動Safari中的空白問題立即...

嘗試使用100％的CSS屬性min-width和min-height，或以像素爲單位的背景圖像大小。這應該強制視口（這是呈現白色空間）堅持你的背景圖像的大小（橫向和縱向）。

此外，您也可以嘗試將margin: 0應用於HTML或BODY元素。

希望它的作品！

P.S.你可能需要這個標籤，以及在你的HTML：

<meta name="viewport" content="width=device-width">

但同樣，我是新來這個，所以我不知道這是否是necesary。

來源

2012-10-31 08:06:05

在移動Safari（iOS 5），風景和肖像中修復和居中背景圖像

回答

相關問題