高密度網膜ディスプレイをサポートする5つの方法

最近の投稿「レスポンシブウェブデザインとスクロールバー：Chromeの実装が良いですか？」で、Brendan Davisによって興味深い点が提起されました。 短い答えは次のとおりです。いいえ - しかし、私たちはもう少し深く掘り下げて、彼らが引き起こす可能性のある問題を見る必要があります。 網膜とは？

「Retina」はAppleの2倍の画面のブランド名ですが、他のメーカーは同様のディスプレイを作成しています。このテクノロジーは、最近のiPhone、iPad、MacBook Pro、その他のハイエンドデバイスで使用されています。 たとえば、

MacBook Pro 15インチの解像度は2,880×1,800または220ピクセルあたり220ピクセルです。この規模では、ほとんどの人は、典型的な視聴距離で個々のピクセルに気付くことができません。アプリケーションとウェブサイトは使用できないほど小さすぎます。 したがって、デバイスは1,440×900の標準解像度に戻りますが、追加のピクセルを使用してフォントとグラフィックをよりスムーズに見せることができます。

問題は何ですか？

標準解像度ビットマップ画像は、網膜ディスプレイでブロック状に見えることがあります。 400 x 300の写真は800 x 600ピクセルにスケーリングされていますが、追加の詳細はありません。これは、滑らかなフォントやその他の高解像度画像と比較すると顕著になります。

実際の使用法

ウェブを見回すと、誰もが網膜ディスプレイを持っていると考えることを許されるでしょう。現在、ハイエンドデバイスでのみ利用できますが、これらは開発者によって切望されているため、不均衡な量のオンラインディスカッションにつながります。現実の世界では、同様のディスプレイを使用している人の割合は、単一の数字が少ないです。

コンテキストに入れましょう：IE6/7ユーザーの1％を開発していない場合は、おそらくRentinaを使用している人を心配しすぎてはいけません。

とはいえ、網膜のような画面は最終的にすべてのデバイスに移行します。今、心配する理由はほとんどありませんが、前向きな計画に害はありません。推奨の順にオプションを見てみましょう…

1。 SVGSおよびCSS3効果

を使用します

手がかりは名前にありますが、スケーラブルなベクトルグラフィックスは…

SVGは写真には実用的ではありませんが、ロゴ、図、チャートに最適です。主な欠点は、IE8以下でのサポートの欠如ですが、常にPNGフォールバックを提供したり、RaphaëlやSVGWebなどのシムを使用したりできます。参照：スケーラブルなベクトルグラフィックをWebページに追加する方法いくつかの画像を完全に交換することもできます。たとえば、グラフィックとして定義されたタイトル、グラデーション、コーナー、または影は、CSS3のみを使用して再現できます。それらはより良い品質でレンダリングされ、より少ないHTTP要求になり、より少ない帯域幅を使用します。

2。 WebFontsアイコンを使用してください

WebFontsアイコンを使用すればするほど、それらを愛しています。 SVGと同様に、フォントはベクトルであるため、スケーラブルであるため、アイコンを含むフォントセットを使用できます。電子メールの封筒、電話、ウィジェットコントロール、ソーシャルメディアのロゴなど、頻繁に頻繁に使用される形状に最適です。また、IE6を含むすべてのブラウザでも動作します

利用可能な商業用および無料のアイコンフォントセットがたくさんあります：

典型

• フォント素晴らしい
• 象徴的
• 基礎
または、ICONフォントが大好きなようなホストされたフォントサービスを使用できます。

FontelloやIcomoonなどのオンラインツールを使用して、独自の小さなカスタムアイコンセットを作成することをお勧めします。

3。実用的な場合は、高解像度画像を使用します

Retinaには、標準画面の4倍のピクセルがあります。 400 x 300の画像（120,000ピクセル）がある場合は、800 x 600の代替（480,000ピクセル）を使用して、高密度ディスプレイで適切にレンダリングする必要があります。 ただし、高解像度のファイルサイズは必ずしも4倍大きいとは限りません。すべての画像は異なりますが、省略できる色または詳細の固体ブロックが含まれている場合、800 x 600の画像を使用してブラウザでスケーリングすることが実用的かもしれません。

実用的である：標準画像が200kbで、高解像度バージョンが250kbの場合、画像置換技術を使用して無視できる利点があります。全体を通してより良いバージョンを使用してください

4。 CSSイメージの交換を使用してください

画像の高解像度バージョンが4倍大きい場合があります。そのような状況では、画像置換技術を検討することをお勧めします。つまり、標準の画像は網膜ディスプレイ上のより大きな代替品に置き換えられます。次のメディアクエリコードを使用できます

欠点：

2つのセットの画像を作成して維持する必要があります。

一部のブラウザは両方の画像をダウンロードします

これらのユーザーの多くは、より遅いモバイルネットワークでスマートフォンまたはタブレットを使用することを忘れないでください。接続速度を検出することは、ピクセル密度を決定するよりも有益です。

5。 JavaScriptイメージの交換を使用してください

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

網膜ディスプレイの検出は、次のコードを使用して実装できます。

網膜ディスプレイが決定されたら、

にできます
すべてのページ画像をループし、URLを抽出します。
ファイル名に「@2x」を追加し、ajaxを使用して結果の画像URLをロードしようとします。
2. 見つかった場合は、現在の画像を高解像度の代替品に置き換えます。
幸いなことに、retinajs.comで努力が行われました。 4kbの重量しか追加されていませんが、高密度ディスプレイデバイスは画像を2回ダウンロードしますが、ページが読み込まれた後に2回目はバックグラウンドプロセスとして発生します。
私のアドバイス：実用的で、シンプルにしてください。比例して少数のユーザーを抱えるデバイスの軽微なレンダリング問題を解決しようとするために、膨大な時間を費やさないでください。もちろん、上司が彼の新しいiPadを受け取り、画質について不平を言うようになったとき、それは重要ではありません…

この記事へのコメントは閉じられています。 Retinaディスプレイについて質問がありますか？フォーラムで尋ねてみませんか？

以上が高密度網膜ディスプレイをサポートする5つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。