More than 5 years have passed since last update.

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

Last updated at 2018-08-27Posted at 2018-08-24

やること

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

前提

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up