4Kディスプレイでの表示

Question

疑問

フルHDと4Kのモニターではppiが異なり、例えばfont-size:16pxの文字では表示される大きさが異なってきますよね。
そうすると、4kのモニターって表示される文字の大きさめっちゃ小さくね？って疑問がわいてきました。

調べてみたこと

スケーリング設定や縮小拡大率の設定をすると問題が解決するらしいということは分かりました。

参考サイト

ということはウェブサイトを作る時、4Kモニターのことを考えて何か書く必要は無いということなのでしょうか...？
(スマートフォン向けのデザインをする時viewportの設定をしますよね。4kモニターも同様に、何かしらの工夫をhtmlやcssで施さないとうまく表示されないかな？みたいな疑問がわいてきて...。)

Answer 1

高解像度の端末の場合、1pxは物理的な1ピクセルとは対応しません。

高解像度の端末では、インチ (in)、センチメートル (cm)、ミリメートル (mm) は対応する物理的な単位と同じになります。従って、 px の単位は、それ（1インチの1/96）を基準に定義されます。（MDNより）

Comments

[usui_orange]

回答ありがとうございます！
スマートフォンではCSSピクセルありますが、パソコンの画面においてもCSSピクセルがあるのかな？というのが自分の疑問でした。
高解像度端末というのはスマートフォンだけではなく、パソコンの画面も含まれるのでしょうか？
また具体的にはどこからが高解像度端末になるのでしょうか。例えば4Kの27インチディスプレイは高解像度端末に含まれるのでしょうか...？

Answer 2

4K ディスプレイといっても、下はスマホサイズのもの（SONY Xperia XZ2 Premium）から上はメートル単位でサイズを記載するようなものまであるわけで、全部が全部同じようにスケーリングしたらおかしなことになります。

CSS は「物理的なピクセルサイズを考慮して絶対値としての長さを与える」ことは可能ですが（in, cm, mm 等）、対象としている表示媒体（あるいは印刷媒体）がどれだけの絶対的なサイズを持っているかまでは知ることはできません。

ですからスケーリングについては媒体側（ブラウザ側）に任せるしかないかと思います。

Answer 3

ウェブサイトを作る時、4Kモニターのことを考えて何か書く必要は無いということなのでしょうか...？

4K普及の過度期？の現時点では、PCについては「無い」で良いかと思います。スマホ並みに普及すれば、各ブラウザーやCSSが対応してくると思います。

※個人的な感想です。
(^^;)

Answer 4

サイズ指定についてはemとかremとか含めて覚えると良いですね。