デバイスの高さについて

デバイスごとのブラウザ表示領域が異なりファーストビューに要素が収まっておらずお客さんと揉めたのでそれについて色々と調べた時の備忘録

デバイスの画面解像度と実際に表示されるサイズは異なる

デバイスの解像度で1920 x 1080という数値を見たことがあるかと思うのだが、実際に表示される際には1920 x 1080で表示されていないという話

例えば僕はsurfacepro6を使っていて
ディスプレイ解像度は2736 x 1824なんだけど
画面を表示する際は200％で表示されるようになっている

つまり、「2736 x 1824 / 2 = 」という計算を行うと
実際の表示領域として「1368 × 912」という数値が導き出せる
これが実際のディスプレイの表示領域

しかし高さに関してはブラウザの表示領域は912pxではなく
ここからPCのタスクバーやブラウザのツールバーが引かれるので
実際の表示領域としては「1368 × 787」になる
タスクバーとツールバーで「125px」分取られている計算になる

以下のjavascriptのコードを開発者ツールのconsoleに投げると実際の表示領域を導き出せる

var window_w = window.innerWidth;
var window_h = window.innerHeight;
console.log(window_w);
console.log(window_h);

そして高さに関してはブラウザごとにツールバーの高さが異なるようで
Firefoxで上記のコードを試すと「1368 × 759」になる
Firefoxでは「153px」分タスクバーとツールバーで高さが取られるということ

デバイスの解像度と実際に表示されるサイズも異なるし、ブラウザごとの高さも異なるよう

調べた経緯

作成したサイトのメインビジュアルの高さが800px弱
お客さんのデバイスが1920 x 1080の解像度で、
実際の表示としては150％表示、、、

つまり、「1280 × 720px」の表示領域で
そこからタスクバーとツールバーで120pxほど引くと
「1280px × 600px」がお客さんのデバイスのサイトの表示領域だった

がっつり200pxくらい見切れるんだよね(笑)
そこをつつかれてどーしよ、、、って調べたのが経緯

デバイス解像度シェアについて

デバイスの解像度については以下のリンクを参考するといいと思う

上記のサイトを参考にすると「1920 x 1080」が圧倒的に多かった
そして、このデバイスでの推奨設定が150％表示らしくて
「1280 × 720」が実際の表示領域
そこから各バーを引いた「1280px × 600px」が大体のファーストビューっぽい
※chromeの場合

だから、主要デバイス（PC）に対応する時のファーストビューは600pxを目途にしたほうがいいみたい
デザイナーさんは知っておいた方がいいかもね