モバイルおよび網膜ディスプレイの高解像度画像用CSS

網膜ディスプレイを使用しているユーザーのウェブサイト画像がぼやけて見えます。（例えば、Retina MacBook Proの場合）。モバイルおよび網膜ディスプレイの高解像度画像用CSS

網膜ディスプレイを使用している訪問者に高解像度の画像を提供するにはどうすればよいのですか？あなたのHTMLで

2012-06-16 Chris Nolet

JavaScriptの解決策：[retinajs]（http://retinajs.com/） –

、そのような<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で確認できます。

出典

2012-06-16 03:52:38

このコードがどのように機能するのか、メディアクエリの目的と 'background-size'宣言などについて説明してください。（あなたはもはや '-webkit-background-size'は必要ありません...） – BoltClock

@BoltClockもう少し説明を加えて、提案通りに-webkit-background-sizeを削除しました。ありがとう！ –

Webkit固有のものか、他のvedorプレフィックスがありますか？私もそこに疑問があります-moz – mastazi

私たちは、比が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/

を

出典

2012-06-16 13:07:00

@ChrisNolet、オリジナルに戻したい場合は、ロールバックを行い、再編集しないでください。 – psubsee2003

申し訳ありません@ psubsee2003 - それを行う方法がわかりません！このページにはロールバックリンクがありません：http://stackoverflow.com/posts/11063689/revisionsあなたは救いの手を貸すことができますか？ありがとう。 –

@ChrisNolet私の悪い... 2Kの担当者がいるまでロールバックすることはできません。私はあなたのためにそれをロールバックします。 – psubsee2003

モバイルおよび網膜ディスプレイの高解像度画像用CSS

答えて

関連する問題