0

重複の可能性：
Webサイトの網膜グラフィックを設定するにはどうすればよいですか？

Retinaグラフィックを搭載した新しいiPadに表示されるWebページに2倍の画像を追加するための最良の方法は何ですか？

私はこれらの記事を読みました。

http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/

http://www.teamdf.com/web/automatically-serve-retina-artwork/191/

http://retinajs.com/

4

1 に答える 1

2

Retina ディスプレイ (および大型ディスプレイ画面など) の問題に対処するためのさまざまな方法が提案されていますが、残念ながらこれらのほとんどは単なる提案です。

最も一般的な 2 つは、タグを追加する提案です。これは複数の画像を受け入れ、ブラウザーは 1 つだけを読み込みます (開発者が指定したメディア クエリによって異なります)。

<picture alt="angry pirate">
   <source src=hires.png media="min-width:800px">
   <source src=midres.png media="min-width:480px">
   <source src=lores.png>
      <!-- fallback for browsers without support -->
      <img src=midres.png alt="angry pirate">
</picture>

もう1つの提案は、画像で「srcset」を使用して画像の複数のソースを指定することです:

<img alt="Cat Dancing" src="small-1.jpg"
srcset="small-2.jpg 2x,  // this is pretty cool
large-2.jpg 100w,       // meh
large-2.jpg 100w 2x     // meh@2x
">

個人的には、これはもっと醜いと思います (そして、ブラウザがどの画像を読み込むかを決定するため、制御が少なくなります) が、私の理解では、2 番目の解決策が公式仕様に追加されました (ある程度)。

これらの提案以外の唯一の実際の現在の解決策は、元のサイズの 2 倍 (または好みに応じて 1.5 倍) の画像から始めることです。

いろいろ工夫して JavaScript ソリューションを実行することは可能かもしれませんが、それは物事を複雑にしすぎると思います...

以下は、あなたが説明した問題について説明している非常に優れた記事です (私は少しとりとめのない感じです!): http://www.alistapart.com/articles/mo-pixels-mo-problems/

于 2012-11-07T11:26:07.910 に答える