高密度表示に対応した表紙画像を設定する

Question

私には深刻な問題が1つあります。まだ解決策が見つかりませんでしたので、ご了承ください。

私はウェブサイトをやっています。私はレスポンシブ・カバー・バックグラウンド・イメージを作成する必要があります（ページ全体をカバーします）。私が使用を開始：

/* Location of the image */ 
    background-image: url(main.jpg); 

    /* Background image is centered vertically and horizontally at all times */ 
    background-position: center center; 

    /* Background image doesn't tile */ 
    background-repeat: no-repeat; 

    /* Background image is fixed in the viewport so that it doesn't move when 
    the content's height is greater than the image's height */ 
    background-attachment: fixed; 

    /* This is what makes the background image rescale based 
    on the container's size */ 
    background-size: cover; 

    /* Set a background color that will be displayed 
    while the background image is loading */ 
    background-color: #464646; 

このコードだけで、それは非常によくあるので、私は、ウィンドウのサイズを変更して..だから場合でも、動作します。しかし、problémは、iPadやiPhoneのような高さ解像度の画面に表示されます。そこで、画像は非常に非常にズームされ、ちょっとピクセル化されるか、またはピントが合わない。私は、それは低い画像の解像度のためだと思ったが、私が気付いたよりも、その画像はほぼ5Kである。私はそれのように応答するようにしたいthis site

何か助けて、すぐにそれを解決する必要があります！

おかげ

Answer 1

あなたは網膜ディスプレイ（または他の高解像度の画面）に背景画像を設定してmanualyするCSSメディアクエリを作成することができます。

CSS-tricksを参照してください。

Mediaquery網膜ディスプレイ：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... } 

そして、もっとfurute証明：

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and ( min--moz-device-pixel-ratio: 2), 
only screen and ( -o-min-device-pixel-ratio: 2/1), 
only screen and (  min-device-pixel-ratio: 2), 
only screen and (    min-resolution: 192dpi), 
only screen and (    min-resolution: 2dppx) { ... } 

---

質問：

• What are media queries?
• What is DPI?
• What is device pixel ratio?

---

また同じ質問/回答にthis postを参照してください。

Answer 2

あなたがバックグラウンドの添付ファイルを使用しているためです：固定 - 何らかの理由でiOSのbackground-size：coverで使用するとこの動作が発生します。したがって、以下を追加する場合は、解決する必要があります：

/* for background-size:cover replacement on iOS devices */ 
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) { 
    header { 
     -webkit-background-size: auto 150%; 
     background-attachment: scroll; 
    } 
} 
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) { 

    header { 
     -webkit-background-size: 150% auto; 
     background-attachment: scroll; 
    } 
} 

ソリューションhere on SOからです。