24

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

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

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

@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 MacBook で実行されているブラウザのデフォルトのフォント サイズは 16 ピクセルのままですか、それともそれ以上ですか? 高いとスケーリング効果が倍増するからです。

私の質問は次のとおりです。ems を一貫して使用する場合、必要な唯一のことは、すべてのデバイス ピクセル比のフォント サイズを変更することだけですか?

4

2 に答える 2

51

わかりました、これはかなり重大な誤解です (これは素晴らしいことです! :) )。そこで、何をしたいのかを簡単に説明します。

まず、最近の iPhone/iPod/iPad や多くの Android スマートフォンには Hi DPI スクリーンが搭載されているため、すでにテストするものがあるかもしれません。そうでなく、専門的にこれを行っている場合は、4G iPod Touch を購入してください。

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

フォント、SVG、CSS ボックスの影、グラデーション、およびその他の CSS で描画されたものについては、すべて問題ありません。これらのものは、余分な作業をしなくても見栄えがします。(そのため、私たちはしばらくの間、すべての CSS を推し進めてきました。)

ビットマップ (つまり、png、jpg、gif) の場合は、画像を 2 倍の解像度で提供するだけで済みますが、サイズは通常と同じです。

たとえば、ページに 100 ピクセル x 100 ピクセルの画像がある場合、200 ピクセル x 200 ピクセルの画像を提供しますが、CSS で指定するか、HTML の属性として 100 ピクセル x 100 ピクセルであることを指定します。

これが機能する理由は、画面上のピクセルが CSS ピクセルと同じではないためです。これは良いことです。

px後から考えると、CSS の単位を adotや何かのように別の名前にしたほうがよかったかもしれませんが、その通りです。

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

于 2012-08-21T19:11:11.717 に答える