cssのpx指定の仕組みがよくわかりません

Question

私の使用しているmacのRetinaディスプレイの解像度は2560 x 1600ですが、現在はディスプレイ設定でデフォルトにしているため、1440 x 900です。

しかしCSSでwidthを1000pxと指定した要素をこのディスプレイに表示させてみたところ、到底ディスプレイサイズの横幅が1000/1440を埋めるようなサイズとは思えませんでした。

どういうことでしょうか？？
回答よろしくお願いします。

Comments

[yoshinavi]

デバイスピクセル、CSSピクセルで検索すると、違いが理解出来るかと思います。

Answer 1

はい、スマートフォンなどデバイスによっては、CSSから見える1pxが、物理的な1ピクセルと一致しません。

window.devicePixelRatioで実際のピクセルがどれくらいのサイズなのか取得できます（MDN）。

Comments

[sakas1231]

回答ありがとうございます！
つまり
CSSで1000pxと指定した場合、画面に表示されるピクセル数は全てのディスプレイで1000pxだけれど、ピクセルサイズが各ディスプレイによって異なるため表示される要素の長さもそれに伴って変わる
という認識でよろしいでしょうか？

この認識ですと、CSSでwidthを1000pxと指定した場合、widthが1440pxのディスプレイでは等しく画面サイズの1000/1440の割合で表示されるのではないかと思ったのですが、私の認識違いでしょうか。

[think49]

To: sakas1231 さん
文章だけで結論を出さず、window.devicePixelRatio の値を確認してみてはいかがでしょう。

[sakas1231]

返信ありがとうございます。
弊PCでのwindow.devicePixelRatioは1.6でした。
もう少し考えてみたいと思います。

Answer 2

<meta name="viewport" content="width=****, initial-scale=****">

viewportの値はどうなっていますか。

• モバイルブラウザでのレイアウトを制御するために meta タグの viewport を使う - Mobile | MDN

Re: sakas1231 さん

Answer 3

CSSでのピクセルとディスプレイ上のピクセルは、かつては同じものであったのですが、今は違います。
以下の記事などが参考になるでしょう。
「解像度」の理解があいまいだったので備忘録としてまとめてみた | Tech Blog | 株式会社INDETAIL - インディテール
解像度の切り替え: 同じサイズ、異なる解像度 | レスポンシブ画像 - ウェブ開発を学ぶ | MDN

Comments

[sakas1231]

ご回答ありがとうございます！
リンクの方読まさせていただき、解像度についての理解が少し深まりました。
早かった回答の方に質問をぶら下げさせていただきましたので、ぜひそちらの方に参加していただけるとありがたいです。
よろしくお願いします。

[Lhankor_Mhy]

あ、そうか、そうですよね。とすると、mac独特の問題かもしれません。当方の環境では確認できないので、他の回答者を待った方がよさそうです。