13インチのMacBook Proでのモダンブラウザごとのサイト表示領域のまとめ
ふとモダンブラウザの上部分の高さはどれくらいなのか知りたくなったので、測ってみました。
結果から言うと、高さが1番低くなるのが「メニューバーあり + Google Chrome（ブックマークバーあり）」の765pxで、1番高くなるのが「メニューバーなし + Safari（タブなし・お気に入りバーなし）の861pxでした。
Safariは基本タブ化するでしょうし、フルスクリーンにしてメニューバーを消して見るひとも稀だと思いますが、13インチを使っている人のファーストビューは840px〜765pxの間になりそうです。
また、現在のブラウザシェアはGoogle Chromeが圧倒的なので、それに合わせるのであれば819px〜765pxになります。
13インチのPCの場合のサイズ
自分の環境ですが、13インチのMacBook Proを使用しているので、横幅は1440px・高さは900pxとなっています。
その上でモダンブラウザであるGoogle Chrome・Firefox・Safariの上部分の高さを調べて、最終的な表示領域がどうなるのか調べてみます。
メニューバーの高さ
そもそものmacOSのメニューバーの高さは22pxでした。
ほとんどのユーザーがメニューバーは基本的に表示させていると思うので、高さの初期値は「900px – 22px」で878pxとなります。
ただし、フルスクリーンにするとメニューバーは自動で非表示になるため、初期値は900pxとなります。
各ブラウザの高さ
Google Chrome
Google Chromeは「ブックマークバーなし」の場合と「ブックマークバーあり」の状態があります。
| 状態 | ヘッダーの高さ | メニューバーありのブラウザ領域 | メニューバーなしのブラウザ領域 |
|---|---|---|---|
| ブックマークバーなし | 81px | 797px | 819px |
| ブックマークバーあり | 113px | 765px | 787px |
ちなみにブックマークバーの高さは32pxとなります。
Firefox
Firefoxでも「ブックマークツールバーなし」の状態と「ブックマークツールバーあり」の状態があります。
| 状態 | ヘッダーの高さ | メニューバーありのブラウザ領域 | メニューバーなしのブラウザ領域 |
|---|---|---|---|
| ブックマークツールバーなし | 75px | 803px | 825px |
| ブックマークツールバーあり | 97px | 781px | 703px |
ブックマークツールバーの高さは22pxとなります。
Safari
Safariには「タブバー」と「お気に入りバー」の2つ、高さが変わる要素があります。
| 状態 | ヘッダーの高さ | メニューバーありのブラウザ領域 | メニューバーなしのブラウザ領域 |
|---|---|---|---|
| タブなし + お気に入りバーなし | 39px | 839px | 861px |
| タブあり + お気に入りバーなし | 64px | 814px | 836px |
| タブあり + お気に入りバーあり | 89px | 789px | 811px |
タブもお気に入りバーも、両方25pxになります。
まとめ
正直、13インチ以外だとまた変わってきますし、固定値で考えるのはあまり良くないのですが、デザイン時の参考数値として使っていただければと思います。
また、実装側に関しては、単位をvhにすればブラウザの高さにフィットできますが、それに追加でmin-heightやmax-heightを使って最小値・最大値を設定するときは、この辺の数値を参考に設定すると良さそうです。
