Viewportとはなんぞや
こ、これは…？
320*441の画面は小さすぎでは…？
と、恥ずかしながら今までWEBサイトを色々作ってきたのにこのViewportサイズというものをはじめて見て、いくら何でも小さすぎないかと調べた結果、イコール画面解像度、というわけではないようでした。
CSSとかで指定するのは大抵ピクセルなんですけど、画面解像度と一口で言っても色んな定義があるらしく、イコールスペック上の解像度の数値とは違うようで、例えばわたしが使っているiPhoneSE(第3世代)では下記のようなスペックなわけですが
わたしはこの解像度＝WEB制作で指定するピクセルだと思っていたわけです。iPhoneSEの場合1334*750ピクセル。
で、Viewportサイズというのもこの解像度のことだろうと思ってアクセス解析を見ていたら、めちゃくちゃ小さいサイズの方がいらっしゃる。
え、こんな小さい解像度までカバーするの？
と思い、調べてみました。
結論としてはスマホでよく「Retinaディスプレイ」とか「フルHD」とか呼ばれる高精細ディスプレイというのが曲者のようです。
この高精細ディスプレイが実際はパソコン画面のように細かく表示することはできるんだけど、スマホの小さい画面の中でパソコン並の1334*750の画面を映すと文字も画像も非常に小さく表示されてしまう、それって視認性が悪いよね、という理由で大きく表示しよう→1pxを何倍かに大きくして表示しよう。
でこの何倍かに拡大されたピクセル＝１ピクセルとして表しているのがViewportサイズ。
つまり、実際はスペック上このViewportサイズよりも3～４倍くらいの大きさの画面として表示できるんだけど、ブラウザではあえて拡大して表示してるよ、という話のようです。
つまり、非常に雑に言ってしまえば、320*400前後のViewportサイズは、スマホからの閲覧ですよ、と捉えて良いわけですね。
大変勉強になりました。
WordPressはほとんどのテーマで普通にレスポンシブ対応しているので、実際にViewportを指定してサイトを製作したことがなかったために今まで知らなかった、というお恥ずかしいお話でした。
さて、夜勤明けなので寝ます。