どういうわけか、約1年前、写真家の友人が写真を減らす必要があると不満を言い、すべての塩分を含む細部を失い、スクリーンの解像度がドットが目立ちすぎるほどだったと言った。 彼は、作物のせいでiPhone 4を拒否しました-かなりの物理的解像度にもかかわらず、写真の一部だけがそのようなディスプレイに配置されています。 その後、彼はトリミングされたマトリックスを備えたカメラに切り替え、良いレンズを使用した場合でも何が起こるかを知りましたが、私は画像の表示に関係する部分、つまり、画像のサイズをリリプットに縮小せずに画面から画像を正確に表示する能力の欠如に夢中になりました。
そして、大きなiPadが登場しました！
しかし、ジョークはジョークであり、新しいiPadを使用することで、デジタル写真を以前の表示方法に近づけることができました。これは素晴らしいことです。 しかし、コンテンツやデザインで通常大きな画像が使用されるサイトは、インターネット上にはほとんどないことが判明しました。
解決策があり、サイトを完全に再設計する必要はなく、マイナーリビジョンのみが必要です。
まず、外国人の同僚は、高解像度の画像を表示するための自動サポート（
@2x
）がある法の手紙、つまりiOS用の描画と印刷ガイドに基づいて高解像度画像を配信するタスクに取り組みました。 これらの大きな写真を提供し、そうであると言うことだけが必要です。 もちろん、大きな画像はそれらが必要な場合にのみダウンロードされ、解像度が約72dpiの普通の使い慣れたデバイスのユーザーは、重い画像を無駄にダウンロードしません。
第二に、彼らはこの問題を簡潔に、そして2つの方法で解決しました。
javascriptの場合
retina.js （1.63 Kb）をサーバーにアップロードし、ドキュメントの本文を完成させるために、終了タグから遠くないフッターで呼び出すことをお勧めします。 呼び出しは標準です：
<script type = "text / javascript" src = "/ scripts / retina.js"> </ script>
少ない
不要な説明なしで明確な構文が発明されました：
.at2x(@path, [optional] @width: auto, [optional] @height: auto);
http://retinajs.com/のアーカイブからretina.lessファイルに含まれるコードを接続（LESSスタイルシートに含める）し、 次のような構造の全機能を使用する必要があります。
#something
{ .at2x('/images/image.png', 200px, 100px); }
さまざまな種類のディスプレイで利用可能な画像オプションを表示するための詳細な手順に奇跡的に変換します。
#something
{ background-image: url('/images/image.png');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#something {
background-image: url('/images/image@2x.png');
background-size: 200px 100px;
}
}
結果
たとえば、ページに面白い写真があります：
<imgsr= "/ images / boobs.png" />
出力時に、スクリプトは大きな画像
"/images/boobs@2x.png"
が存在するかどうかを確認し、存在する場合（および物理的な解像度が高い画面を使用している場合）、それを表示します。