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|
以上です。