網膜ディスプレイを使用しているユーザーのウェブサイト画像がぼやけて見えます。 (例えば、Retina MacBook Proの場合)。モバイルおよび網膜ディスプレイの高解像度画像用CSS
網膜ディスプレイを使用している訪問者に高解像度の画像を提供するにはどうすればよいのですか?あなたのHTMLで
網膜ディスプレイを使用しているユーザーのウェブサイト画像がぼやけて見えます。 (例えば、Retina MacBook Proの場合)。モバイルおよび網膜ディスプレイの高解像度画像用CSS
網膜ディスプレイを使用している訪問者に高解像度の画像を提供するにはどうすればよいのですか?あなたのHTMLで
、そのような<div>
作成:
<div class="ninjas-image"></div>
そして、あなたのCSSでの、追加:
.ninjas-image {
background-image: url('ninja-devices.png');
width: 410px;
height: 450px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ninjas-image {
background-image: url('[email protected]');
background-size: 410px 450px;
}
}
をここで魔法がCSS @media
クエリです。 「デバイスのピクセル比率」が1.5(144 dpi)以上であると報告する際には、ダブルサイズの画像([email protected])が表示されます。このようにすると、元の小さな画像を非網膜のデバイスに配信することで帯域幅を節約することができます。もちろん、網膜デバイスでは見た目は素晴らしいです。
注:
この回答をベストプラクティスを反映するために2016年に更新されました。 min-device-pixel-ratio
は標準には入りませんでした。代わりにmin-resolution
が標準に追加されましたが、デスクトップとモバイルのSafariでは書き込み時にサポートされません(したがって、-webkit-min-device-pixel-ratio
フォールバック)。最新の情報はhttp://caniuse.com/#feat=css-media-resolutionで確認できます。
私たちは、比が1.5以上である複数のケースを処理するために、次を使用してきた - これは、アカウントに複数のデバイスやブラウザをとります。
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
私たちは、サイト全体の網膜が有効になっている:http://www.embraceware.com/
を@ChrisNolet、オリジナルに戻したい場合は、ロールバックを行い、再編集しないでください。 – psubsee2003
申し訳ありません@ psubsee2003 - それを行う方法がわかりません!このページにはロールバックリンクがありません:http://stackoverflow.com/posts/11063689/revisionsあなたは救いの手を貸すことができますか?ありがとう。 –
@ChrisNolet私の悪い... 2Kの担当者がいるまでロールバックすることはできません。私はあなたのためにそれをロールバックします。 – psubsee2003
JavaScriptの解決策:[retinajs](http://retinajs.com/) –