やること

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

前提

・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/

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>

全タイプ共通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

その１

body{width: 100vw; height: 100vh;}
body>.wp{}
section{width: 33.3vw; height: 33.3vh;}

その2: 全体的に%

その2

body{width: 100%; height: 100%;}
body>.wp{}
section{width: 33.3%; height: 33.3%;}

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

その3

body{width: 100vw; height: 100vh;}
body>.wp{}
section{width: 33.3%; height: 33.3%;}

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

その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でアカンかった。
（対応が必要かどうかは置いといて。）