iPad＆iPhone：カットオフ/スクリーンショットリンクがフルページの背景画像に表示されます

Question

iPhoneとiPad（Safari iOS 5.01）でフルページの背景画像が表示されます。 http://www.theantarcticbookofcookingandcleaning.com

これについていくつかのアドバイスをいただければ幸いです。事前にあなたの助けをありがとう！

スクリーンショットは以下の通りです： 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; 
} 

Answer 1

試みが追加：

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

Answer 2

あなたの問題背景画像のスケーリングです。画像をレンダリングするとき、iPadのSafariは、デバイスに最適になるように拡大縮小しようとします。画像の実際のサイズがiPadのディスプレイよりも大きければ、拡大縮小されます。この場合、あなたの背景イメージは1280x3900 —で、iPadの解像度—よりもはるかに大きいので、Safariはそれを垂直に合わせてサイズ変更しようとしています。

This question他の場所でスタックオーバーフローが発生すると、この問題を解決するのに役立ちます。私は背景画像のサイズを変更し、メディアクエリを使用して、これをiPadsにのみ提供し、それをデスクトップブラウザ上に残すレスポンダの提案に同意します。

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

Answer 3

まあ、私は単に

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

によって

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

をなかった置き換えるために：あなたのCSSファイルの末尾に以下を追加し、メディアクエリを実装するために

トリック。それを試してみてください。

それはあなたのために動作しない場合は、アップルのSafari Devのドキュメントは、あなたに役立つかもしれない： https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 4

トリックは

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

Answer 5

体に最小幅を与えることですここでのコード

それはiPad用の背景画像を固定

ちょうどSIを入力します。

/* 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; 
    } 
}