viewportによるサイズの設定と、アドレスバーのふるまいについて

#やること
画面いっぱいにリキッドな構成でレイアウトしたいんだけど、スマートフォンのアドレスバーの挙動がよくわからん、、
ということで、どう書くとどうなるか検証。

#前提

・viewportは幅だけ設定
・sectionは9個設定。
→flexレイアウトによって、画面サイズいっぱいの3×3のマスとしてレイアウトされる。
・下記４つのサイズを取得する
screen.width/height
window.innerWidth/Height
window.outerWidth/Height
document.getElementById('sectionにID').clientWidth/Height
（表示ロジックは省略）
・各セクションはVue.jsによってコンポーネントになっている。
・セクションの中に、イベントを発生させるボタンを設置、クリックするとリマウント＆bodyに各検証タイプのクラス名をセットする。（ロジックは省略）
・画面方向はportraitで検証する

検証に使ったもの：
http://mmtest2.webcrow.jp/addressbar/

```html:index.html
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="./css/style.min.css">
</head>
<body><div class="wp">

<section></section>
<section></section>
<section></section>

<section></section>
<section></section>
<section></section>

<section></section>
<section></section>
<section></section>

</div></body>
</html>
```


```sass:全タイプ共通css
*{box-sizing: border-box;}
html, body{margin: 0; padding: 0; border: none;}
body>.wp{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
```

#調べる内容

##その1: 全体的にviewport

```sass:その１
body{width: 100vw; height: 100vh;}
body>.wp{}
section{width: 33.3vw; height: 33.3vh;}
```

##その2: 全体的に%

```sass:その2
body{width: 100%; height: 100%;}
body>.wp{}
section{width: 33.3%; height: 33.3%;}
```

##その3: bodyはviewport、コンテンツは%

```sass:その3
body{width: 100vw; height: 100vh;}
body>.wp{}
section{width: 33.3%; height: 33.3%;}
```

##その4: bodyは%、コンテンツはviewport

```sass:その4
body{width: 100%; height: 100%;}
body>.wp{}
section{width: 33.3vw; height: 33.3vh;}
```


#結果

##android chromeの結果
android chrome 67.0

| | その1 | その2 | その3 | その4 |
|:----------|:----------|:----------|:----------|:----------|
| screen | 360*640 | 360*640 | 360*640 | 360*640 |
| windowOuter | 360*512(568) | 360*512(568) | 360*512(568) | 360*512(568) |
| windowInner | 360*512(568) | 360*512(568) | 360*512(568) | 360*512(568) |
| section | 120*189 | 120*171 | 120*189 | 120*189 |
| scroll | する | しない | する | する |
| addressbarのふるまい | スクロールとともに | 固定表示 | スクロールとともに | スクロールとともに |

()内：アドレスバーがスクロールにともなって画面表示外の時に、コンポーネント再読み込み


##android firefoxの結果
android firefox 61.0

| | その1 | その2 | その3 | その4 |
|:----------|:----------|:----------|:----------|:----------|
| screen | 360*592 | 360*592 | 360*592 | 360*592 |
| windowOuter | 360*512 | 360*512 | 360*512 | 360*512 |
| windowInner | 360*512 | 360*512 | 360*512 | 360*512 |
| section | 120*170 | 120*--※ | 120*--※ | 120*170 |
| scroll | しない | しない | しない | しない |
| addressbarのふるまい | 固定表示 | 固定表示 | 固定表示 | 固定表示 |

※：%設定で、高さが一定にならない（包含コンテンツにあわせた高さになる）



##iPhone safariの結果
iPhone safari 604.1

| | その1 | その2 | その3 | その4 |
|:----------|:----------|:----------|:----------|:----------|
| screen | 320*568 | 320*568 | 320*568 | 320*568 |
| windowOuter | 0*0 | 0*0 | 0*0 | 0*0 |
| windowInner | 320*454 | 320*454 | 320*454 | 320*454 |
| section | 107*176 | 107*151 | 107*176 | 107*176 |
| scroll | する | しない | する | する |
| addressbarのふるまい | 固定表示※１ | 固定表示 | スクロールで縮小 | スクロールで縮小するけど戻る※２ |

※１：パターン２を表示した後、パターン１のコンポーネントにリマウントすると、スクロールで縮小する
※２：スクロールすると縮小（ステータスバー非表示）するが、スクロールをやめるとサイズが戻る（ステータスバー表示）


##iPhone firefoxの結果
iPhone firefox 13.1

| | その1 | その2 | その3 | その4 |
|:----------|:----------|:----------|:----------|:----------|
| screen | 320*568 | 320*568 | 320*568 | 320*568 |
| windowOuter | 0*0 | 0*0 | 0*0 | 0*0 |
| windowInner | 320*446 | 320*446 | 320*446 | 320*446 |
| section | 107*149 | 107*149 | 107*149 | 107*149 |
| scroll | しない | しない | しない | しない |
| addressbarのふるまい | 固定表示 | 固定表示 | 固定表示 | 固定表示 |

PCと同じで、スクロールしたからといって、アドレスバーがなんか状態変わるわけじゃないらしい


##android samsung internetの結果
android samsung internet 7.4

| | その1 | その2 | その3 | その4 |
|:----------|:----------|:----------|:----------|:----------|
| screen | 360*640 | 360*640 | 360*640 | 360*640 |
| windowOuter | 360*464 | 360*464 | 360*464 | 360*464 |
| windowInner | 360*464 | 360*464 | 360*464 | 360*464 |
| section | 120*154 | 120*154 | 120*154 | 120*154 |
| scroll | しない | しない | しない | しない |
| addressbarのふるまい | 固定表示 | 固定表示 | 固定表示 | 固定表示 |



##android LINE in app brwserの結果
android LINE 13.1

| | その1 | その2 | その3 | その4 |
|:----------|:----------|:----------|:----------|:----------|
| screen | 360*640 | 360*640 | 360*640 | 360*640 |
| windowOuter | 360*520 | 360*520 | 360*520 | 360*520 |
| windowInner | 320*446 | 320*446 | 320*446 | 320*446 |
| section | 120*173 | 120*173 | 120*173 | 120*173 |
| scroll | しない | しない | しない | しない |
| addressbarのふるまい | 固定表示 | 固定表示 | 固定表示 | 固定表示 |



##windows chromeの結果
windows chrome 68.0

| | その1 | その2 | その3 | その4 |
|:----------|:----------|:----------|:----------|:----------|
| screen | 1280*720 | 1280*720 | 1280*720 | 1280*720 |
| windowOuter | 1192*638 | 1192*638 | 1192*638 | 1192*638 |
| windowInner | 1178*515 | 1178*515 | 1178*515 | 1178*515 |
| section | 392*172 | 392*172 | 392*172 | 392*172 |
| scroll | しない | しない | しない | しない |
| addressbarのふるまい | 固定表示 | 固定表示 | 固定表示 | 固定表示 |

なにをどう書こうとびくともしません。
あたりまえ。

#結論
iPhone safari　でちょうどいいと思った設定が、chrome firefoxでアカンかった。
（対応が必要かどうかは置いといて。）