web-dev-qa-db-ja.com

CSSでのピクセル密度、Retinaディスプレイ、フォントサイズ

私自身、これらをテストするためのRetina MacBookを持っていません。インターネット上では、高ピクセル密度のディスプレイでのWebデザインについて多くの混乱があるようです。

ほとんどのWebページはより高いピクセル密度に適応するように構築されていないため、Retinaディスプレイを搭載したMacBook上のWebKitがページのサイズを約2倍に拡大すると想定します。

私の見解では、これら、または実際にはすべてのタイプのディスプレイを設計する場合の理想的なケースは、あなたができるようにピクセルの代わりにemsを使用することです。

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 150%; }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
    body { font-size: 200%; }
}

それに応じてページ全体が拡大縮小します。それとも？ Retina MacBooksで実行されているブラウザのデフォルトのフォントサイズはまだ16pxですか、それともそれ以上ですか？それが高いと、スケーリング効果が倍増するからです。

私の質問はそうだと思います。 emsを一貫して使用する場合は、すべてのdevice-pixel-ratioのfont-sizeを変更するだけです。

csspixelretina-display
19
Triplr

OK、これはかなり深刻な誤解です（これはクールです！:)）。ここで、あなたが何をしたいのかについて簡単に説明します。

まず、最近のiPhone/iPod/iPadまたは多くのAndroid電話にはHi DPI画面があるため、すでにテストする必要があるかもしれません。そうでない場合は、専門的にこれを購入してください。 4G iPod Touch。

それがどのように機能するかという点では、99％のものについては、何もする必要はありません。それがあなたの提案した方法で機能した場合、ほとんどのWebサイトは本来のサイズの4分の1になり、インターネットは壊れます。

フォント、SVG、CSSボックスシャドウ、グラデーション、その他のCSSで描画されたものはすべて問題ありません。これらは、追加の作業を行わなくても見栄えがします。 （そのため、しばらくの間、CSSのすべてに向けて努力してきました。）

ビットマップ（つまり、png、jpg、gif）の場合、必要なことは、画像を2倍の解像度で提供することですが、サイズは通常と同じです。

たとえば、ページに100px x 100pxの画像がある場合、200px x 200pxの画像を提供しますが、CSSまたはHTMLの属性として100px x 100pxと指定します。

これが機能する理由は、画面上のピクセルがCSSピクセルと同じではないためです。これは良いことです。私が言うように、ささいなことですから。

後から考えて、CSSのpxユニットをdotなどの別の何かと呼ぶ方が良かったかもしれませんが、それで終わりです。

CSS pxと画面上の実際のピクセルの違いである、デバイスに依存しないピクセルへの参照が表示されることがあります。

45
Rich Bradshaw

Retinaディスプレイでは、要素のサイズが2倍になることはありません。 Web上の画像にのみ影響します。

画像内の各「ウェブピクセル」には4（I think）「スクリーンピクセル」が必要なので、画像はこれらの余分なピクセルスペースを埋めるように引き伸ばされ、Retinaディスプレイでくっきりと見えなくなります。画像はより高いDPIでエクスポートし、メディアクエリまたはJavaScriptを介してRetinaディスプレイに提供する必要があります。

テキスト、CSSエフェクト、キャンバス、SVGベクトルなどは、網膜ディスプレイによって直接影響を受けることはありません。

3
ChazUK