OSやブラウザ要素の高さ・幅の計測

2019現在のセーフエリアを検証するために、ブラウザのツールバーなどの要素や、OSのタスクバーなどの要素の占有する高さや幅を検証しました。

検証環境は以下。

MacOS10.14.6 2560×1440
Windows10 2560×1440
iOS13 iPhoneXS
iPadOS13 iPadPro12.9

OS

名称	高さ
Macメニュー	21px
MacDoc(最大)	105px
Windowsタスクバー	30px

ブラウザ

後述のJSから算出。
高さは、アドレス・タブ・ステータス・ブックマークバーなどを全部出した時の合計の高さ。
幅はスクロールバーの横幅。

旧型iPhoneとAndroid端末はもってないので、下記サイトの情報から推定。
画面の高さ(height)について WebINLET

PC

名称	高さ	幅
Mac Safari 13.01	88px	15px
Mac Chrome77.0	111px	15px
Mac FireFox69.0.1	96px	15px
Windows IE11	161px	33px
Windows Edge	114px	32px
Windows Chrome77.0	120px	33px
Windows FireFox69.0.1	131px	29px

OS要素と足した場合の最大値

名称	高さ	幅
Mac Doc有+Chrome	237px	15px
Mac Doc無+Chrome	132px	15px
Windows IE/Chrome	191px	33px
最大でとられる領域	237px(Doc考慮しなければ191px)	33px

iPhone Safari

名称	高さ	幅
iPhoneXS Safari	177px	0
PhoneXS Safari ランドスケープ	88px	0
iPhone旧型ポートレート(推定)	114px	0
iPhone旧型ランドスケープ(推定)	114px?	0

iPad Safari

名称	高さ	幅
iPadPro12.9 Safari ポートレート	97px	0
iPadPro12.9 Safari ランドスケープ	97px	0

Android Chrome

名称	高さ	幅
Android7.0 Chrome ポートレート	116px	0

計測コード

JSで計測しました。


<div id="app"></div>
<script>

    window.onload = function(){

        //画面解像度
        var screenH = screen.height;
        var screenW = screen.width;

        //ブラウザ外側
        var browserW = window.outerWidth;
        var browserH = window.outerHeight;
        
        //ブラウザ表示領域
        var withoutBrowserElementsW = document.documentElement.clientWidth;
        var withoutBrowserElementsH = document.documentElement.clientHeight;
        

        var resultText = "<p>";
        resultText += "画面解像度 横 " + screenW + "x 縦 " + screenH +"<br>";
        resultText += "ブラウザ外側 横 " + browserW + "x 縦 " + browserH +"<br>";
        resultText += "ブラウザ表示領域 横 " + withoutBrowserElementsW + "x 縦 " + withoutBrowserElementsH +"<br>";
        resultText += "ブラウザ要素 横合計" + (browserW - withoutBrowserElementsW) + "x 縦合計 " + (browserH - withoutBrowserElementsH) +"</p>";

        var el = document.getElementById("app");
        el.innerHTML = resultText;
        
    };

</script>

セーフエリア

StatCounterの日本のデータ(〜2019/8)で、

PC

1280x720 2.99%
1366x768 13.88%

Mobile

568x320 7.13% (おそらくiPhone5など)

Tablet

1024x768 73.75% (iPad)
960x600 1.68% (古いAndroidTablet)

あたりが下限だと思われる。

したがって、

縦セーフエリア(ファーストビュー)

|720想定 |高さ |
|---|---|---|
|Mac Doc有 |720 - 237 = 483px|
|Mac Doc無 |720 - 132 = 588px|
|Windows |720 - 191 = 529px|
|Mac・Win |483px(Doc考慮しなければ588px)|

|768想定 |高さ |
|---|---|---|
|Mac Doc有 |768 - 237 = 531px|
|Mac Doc無 |768 - 132 = 636px|
|Windows |768 - 191 = 577px|
|Mac・Win |531px(Doc考慮しなければ636px)|

iPhone5想定	高さ
ポートレート	568 - 114 = 454px
ランドスケープ	320 - 114 = 206px

横セーフエリア(PC max-width限界値)

|1280想定 |幅 |
|---|---|---|
|Mac |1280 - 15 = 1265px|
|Windows |1280 - 33 = 1247px|
|Mac・Win |1247px|

|1366想定 |幅 |
|---|---|---|
|Mac |1366 - 15 = 1351px|
|Windows |1366 - 33 = 1333px|
|Mac・Win |1333px|

以上です。