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になる。

▲375になる。

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

これはなぜ?

 

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

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

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

 

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

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

 

つまり、

3 x 375 =  1125

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

 

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました