OSやブラウザ要素の高さ・幅の計測とセーフエリア 2019

# 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](https://webinlet.com/2018/画面の高さheightについて)

### 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で計測しました。

```javascript

<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](https://gs.statcounter.com)の日本のデータ(〜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|

以上です。