13

Retina ディスプレイを使用しているユーザーには、Web サイトの画像がぼやけて見えます。(たとえば、Retina MacBook Pro の場合)。

Retina ディスプレイを使用している訪問者には高解像度の画像を提供し、それ以外の人には標準サイズの画像を提供し、画像の見た目のサイズを維持するにはどうすればよいですか?

4

2 に答える 2

11

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('ninja-devices@2x.png');
    background-size: 410px 450px;
  }
}

ここでの魔法は CSS@mediaクエリにあります。デバイスが 1.5 (144 dpi) 以上の「デバイス ピクセル比」を報告したときにサブインする、2 倍のサイズの画像 (ninja-devices@2x.png) があります。このようにすると、元の小さい画像を非 Retina デバイスに配信することで帯域幅を節約できます。もちろん、Retina デバイスでも見栄えがします。

ノート：

この回答は、ベストプラクティスを反映するために 2016 年に更新されました。min-device-pixel-ratio基準にはなりませんでした。代わりにmin-resolution、標準に追加されましたが、執筆時点ではデスクトップおよびモバイル Safari はサポートしていません (したがって、-webkit-min-device-pixel-ratioフォールバック)。最新情報はhttp://caniuse.com/#feat=css-media-resolutionで確認できます。

于 2012-06-16T03:52:38.570 に答える
2

以下を使用して、比率が 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) {

サイト全体で Retina を有効にしています: http://www.embraceware.com/

于 2012-06-16T13:07:00.857 に答える