web-dev-qa-db-ja.com

1インチあたりのドット数と1インチあたりのドット数とは

jsfiddle.net にアクセスすると、Chrome Developer Toolsコンソールタブからこのメッセージを受け取りました。

「dpi」の代わりに「dppx」ユニットを使用することを検討してください。CSSの「dpi」は物理インチあたりのドット数ではなく、CSSインチあたりのドット数を意味するため、画面の実際の「dpi」には対応しません。メディアクエリ式：画面のみと（-webkit-min-device-pixel-ratio：2）、すべてではなく、すべてではなく、画面のみと（最小解像度：192dpi）、画面のみと（最小解像度：2dppx）

青い色なので、警告やエラーではないと思います。では、なぜこのメッセージに出会ったのですか？どうすればそれを取り除くことができますか、それはjsfiddle自体の問題ですか？

javascripthtmlcssjsfiddle
43
Felix

これはApples Retinaディスプレイに関連していますが、おそらくこれに限定されません。これらのディスプレイは、以前に使用された画面よりも高いピクセル密度を持っていますが、ブラウザーは同じピクセル数を持っているかのように動作します。

例えば。 iPhone 3GSには320 x 480ピクセルのディスプレイがありましたが、iPhone 4は640 x 960ピクセルでリリースされました。ただし、ブラウザーはその解像度でWebサイトを表示する代わりに、320 x 480ピクセルの解像度を装っています。

これはCSSピクセルの発明につながります。 CSSで何かがwidth:100pxであると指定した場合、通常のディスプレイでは100物理ピクセルになりますが、Retinaディスプレイでは200物理ピクセルになります。 iPhone 3GSとiPhone 4は、両方とも同じdpi（CSSピクセルのふりに基づいているため）を持っていますが、dppxは非常に異なっています（実際の物理ピクセルに基づいているため）。

dppxを使用して、クライアントが高ピクセル密度画面を持っていることを検出し、クライアントのブラウザーがその高ピクセル密度を持たないふりをしている場合でも、異なるスタイルを提供できます。

 .comp {
     background-image: url(image.png);
 }

 @media only screen and (min-resolution: 2dppx) {
     .comp {
         background-image: url([email protected]);
     }
 }

CSS-pixelsの詳細： https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

39
Mathias