viewportとは？device-widthと実際の解像度との違い

HTMLで絶対に使われる以下の意味を知らなかったので、調べた結果メモ。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

「そもそもviewportってなんだ？」って調べた結果、

1. まず、実際の液晶の解像度は一旦忘れろ。
2. <meta name="viewport" content="width=480">と指定したとする。
3. するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。
4. ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。
5. 次にviewportを実際の液晶画面に表示する。この時、viewportの幅が実際の液晶画面よりも大きければviewportがはみ出して、液晶画面にはviewportの一部しか表示されないだろう。逆に、viewportの幅が液晶画面よりも小さければviewportの内容は液晶画面に収まるが、液晶画面には余白ができてしまうだろう。これを調整するため、ブラウザはviewportのレンダリング結果を液晶の画面サイズに合うようにズームアップまたはダウンして表示する。
6. <meta name="viewport" content="width=device-width">と指定した場合はviewportの幅は端末やブラウザアプリ毎によって異なる。重要なのはここでも実際の液晶の解像度ではなく360とか580などのスマホらしい小さい値が使われるということだ。

引用：もう逃げない。HTMLのviewportをちゃんと理解する

これを読むと「あーなるほど」って理解できたけど

もう一つ疑問が残った。

それは「スマホの解像度」と「ブラウザで取得できる画面サイズ」が違うということ。

 

例えば、iPhoneXの解像度は1125x2436。

なので

<meta name="viewport" content="width=device-width">

と指定した場合は、1125が実際のwidthになるはず。

でも実際は375と表示される。

 

実際に確認するために以下のように実行してみる。

1. Yahooのサイトを開いて、F12を押す
2. iPhoneXとしてシミュレートして、document.documentElement.clientWidthを取得してみる

すると、document.documentElement.clientWidthの値は375になる。

本来は1125と表示されるはずなのに実際は375。

これはなぜ？

 

結論からいうと、「高精細ディスプレイ」のせいだった。

Appleだと「Retinaディスプレイ」などと呼んだりらしいけど

要するに「1インチ当たりピクセルが何個詰まっているか」を表す用語として、ppiやdpiという用語がありますが、最近のスマホはこの値は非常に高いために、「ブラウザでは1ピクセルを複数のピクセルを使って表そう」という仕組みになっているらしい（この表現が正しいのか分かりませんが）。

 

んで、その「1ピクセルを複数のピクセルを使って表すか」は、window.devicePixelRatioで確認できる。

このように3と表示される。

 

つまり、

3 x 375 =  1125

となり「本来の解像だね！」となる

 

おわり