iPad和iPhone：完整的頁面背景圖像顯示截斷/屏幕截圖鏈接

完整的頁面背景圖像顯示iPhone和iPad（safari iOS 5.01）截斷。 http://www.theantarcticbookofcookingandcleaning.com iPad和iPhone：完整的頁面背景圖像顯示截斷/屏幕截圖鏈接

如果你能給我一些建議，這將是很好的。感謝您的幫助！

截圖低於： http://www.soojincreative.com/photo.PNG

代碼中使用 - >背景圖像是#wrapper指定：

enter code here 
body { 
font: normal normal 16px/22px "Kingfisher Regular", Georgia, "Times New Roman", serif; 
font-size-adjust: 0.47; 
color: #000; 
background-color: #e3e8ee; 
margin-top: -13px; 
} 

#wrapper { 
padding-top:none; 
background: url('images/background2.jpg') no-repeat center; 
width: 1280px; 
margin: 0 auto; 
overflow:hidden; 
}

來源

2012-01-18 Soo

不是一個答案ZES，但你的頁面也沒有很好地處理桌面屏幕。背景圖片不能放大以處理非常大的窗口，並且使窗口更小以切斷內容。另外，您試圖從本地服務器（127.0.0.1:8080）中包含樣式表（該錯誤顯示在Safari錯誤控制檯中）。 – 2012-01-18 19:39:52

嘗試添加：

#wrapper { ... 
    background-size: cover; 
... }

來源

2012-01-18 19:34:22 circusdei

您的問題是背景圖像縮放。在渲染任何圖像時，iPad上的Safari會嘗試縮放以適應設備上的最佳效果。如果圖像的實際尺寸大於iPad的顯示屏，則會縮放。在這種情況下，您的背景圖像是1280x3900 —，比iPad的分辨率—大很多，因此Safari正在嘗試調整其大小以適應垂直方向。

This question堆棧溢出的其他地方可能會幫助您解決此問題。我同意響應者提出的調整背景圖像大小的建議，並僅通過媒體查詢將其提供給iPads，並將其保留在桌面瀏覽器上。

要實現一個媒體查詢，以下內容添加到你的CSS文件的底部：

@media screen and (max-device-width: 1024px) { 
    #wrapper { 
     background-image: url('/path/to/smaller/background/image.png'); 
    } 
}

來源

2012-01-18 19:39:20 piersadrian

嗯，我簡單地更換

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

通過

<meta name="viewport" content="width=1024">

做訣竅。你可能想嘗試一下。

如果它不爲你工作，那麼蘋果的Safari開發文檔可能對您有所幫助： https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

來源

2012-10-30 10:50:36 phildub

這實際上效果不錯，並不是說像這樣的背景由於加載速度而變得非常好，但是我將寬度設置爲我的背景圖像寬度並固定了截斷。 – typemismatch 2013-02-19 17:35:02

訣竅是給最小寬度的身體

body{ width:100%;min-width: 1280px; }

來源

2013-06-13 18:27:16

精彩評論鮑比！ – Kwex 2013-12-08 21:47:20

甚至加上'overflow-x：hidden;'來確定它不會超過這個寬度 – 2014-03-04 06:17:11

代碼在這裏

它爲iPad固定背景圖片

剛進入SI根據你的形象dimentions

/* Page background-image landscape for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image portrait for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image landscape for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    } 
} 
/* Page background-image portrait for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 5024px 2024px !important; 
    background-size: 5024px 2024px !important; 
    } 
}

來源

2014-04-23 14:21:19 comonitos

iPad和iPhone：完整的頁面背景圖像顯示截斷/屏幕截圖鏈接

回答

相關問題