アドレスバー奮闘記

アドレスバー奮闘記

2018, Jun 19    

前段として

スマホサイトでのアドレスバーとは

永遠のテーマですね。

ハード > ソフト(ブラウザ)> ウェブサイト

の力関係の上ではなかなか抗えません。

今日はこの暴力に立ち向かうための奮闘記です。

画面フィットの仕方

もし、あなたが

キービジュアルを画面いっぱいに展開したい時に

どのような方法がありますか?

私は3つのアイディアを持っています。

1.CSSで行う① height 100% の継承

HTML

<div class="kv">kv area</div>
<div>next section</div>

CSS

html,body {
	height: 100%;
}
.kv {
	height: 100%;
}

サンプルはこちら

100vhがなかった時代はよく使っていた手法ですね

この100%というのは必ずブラウザの内部エリアになりますので

iphoneなどのURLバーなどは無視されます。

2.CSSで行う② height 100vh

HTML

<div class="kv">kv area</div>
<div>next section</div>

CSS

.kv {
	height: 100vh;
}

サンプルはこちら

最近では、よく使われていますね。

継承しなくていいので

html,body,その他のDOM要素が入れ子構造になったとしても

展開できるのが便利な部分です。

3.jsでゴリゴリラ

HTML

<body>
	<div class="kv">kv area</div>
	<div>next section</div>
</body>

JS

var NEKOKKE = NEKOKKE || {};
NEKOKKE.VIEW_HEIGHT = {
	init : function(){
		this.setParameters();
		this.setKvHeight();
		this.bind();
	},
	setParameters : function(){
		this.$window = $(window);
		this.$target = $('.kv');
	},
	bind : function(){
		var _self = this;
		this.$window.on('resize',function(){
			_self.setKvHeight();
		});
	},
	setKvHeight : function(){
		this.$target.css('height',this.$window.height());
	}
};
$(function(){
	NEKOKKE.VIEW_HEIGHT.init();
});

サンプルはこちら

一般的にはここの調整に関して

わざわざJSを使うレベルではありませんので

なかなか使いませんが

ある特定の条件下において

必要となる場合があります。

どの方法が最適なのか?

純粋にアドレスバーとメニューバーを抜いたheightを指定したい場合。

まず、2番目のCSSで行う②(height 100vh)の場合はうまくいきません。

サンプルはこちら

なぜなら、100vhの場合下のメニューバーも領域に含まれてしまうからです。

vh = viewport height

このviewportはiphone safariでいうと

下のメニューバーも含まれます。

ただ、これでも良いという場合

つまりこの数十ピクセルの差を許容する

ということでしたら、実装方法が一番手軽です。

CSSでの対応

では1番目のCSSで行う①(height 100% の継承)の場合どうでしょうか?

サンプルはこちら

一見、できているようにみえますが

これは特定条件下だと意図通りに動きません。

それはアドレスバーの引っ込んだり、出たりする動作に起因します。

まず、通常iphoneはページが一番上にある時、2つのバーが出ます。

a.ページが一番上にある時、バーが出ます。

そこから少しでもスクロール(下にスワイプ)すると

引っ込みます。

b.下方向にスワイプすると、バーが引っ込む。

この動作が基本です

そしてボタンなどのリンクをタップしてもバーは出ます。

下記サンプルのjumpと記載されているリンクをタップしてください。

サンプルはこちら

この動作でバーが出ます。

なので

c.リンクをタップするとバーは出ます。

そして、画面の下の方をタップしてもバーは出ます。

d.画面下をタップするとバーは出ます。

なので

a.ページが一番上にある時、バーが出ます。

b.下方向にスワイプすると、バーが引っ込む。

c.リンクをタップするとバーは出ます。

d.画面下をタップするとバーは出ます。

ですが、この条件からいくつか外れる動作があります。

特定条件① ページトップへのアニメーション

下記サンプルを開いてください。

サンプルはこちら

ページトップからスワイプしていきバーを出さない状態(一度も上にスワイプしない)で

ページ中央のpage topというリンクをタップしてください。

この際(page topのリンクをタップする時)はpage topのリンクが

縦画面の中央くらいの位置でタップしてください。

このリンクは機能をキャンセルしてこちらのjsの処理で

ページトップへアニメーションさせています。

この場合、ページが一番上にある時にバーが出ません。

そうなると、height100%はバーを抜いたheightになるので

下のほうがメニューバー分空いてしまいます。

特定条件② pjaxの遷移

サンプルはありませんが

同様の現象が起きる時がもう一つあります。

それはpjaxでの遷移です。

ページリロードが起きないので

例えば、1から2へpjax遷移した後

下へスワイプしてバーを消してから

pjax遷移で1に戻った時などにも

同様の現象が起きる可能性があります。

なのでイレギュラーではありますが

完璧に対応しようとすると

これでも難しいです。

JSでの対応

ではJSではどうでしょうか?

JSであれば、CSSより自由度があるので

この動作の吸収が可能です。

iphoneXを使って色々調べたところ

heightはjsで取得可能です。

jQueryで行きますが下記サンプルを御覧ください。

サンプルはこちら

これは画面リサイズ時(バーが出たり引っ込んだりする時は必ずリサイズが発生します。)

に各数値を取得し表示したものです。

これを見る限り

バーが出る時(バーが出ている時)

outerHeight : バーを抜いた高さ

innerHeight : バーを抜いた高さ

height : バーを抜いた高さ

バーが引っ込む時(バーが引っ込んでいる時)

outerHeight : バーを入れた高さ

innerHeight : バーを抜いた高さ

height : バーを抜いた高さ

です。

つまり、バーが引っ込む時のouterHeightで

バーを入れた高さが取得可能になります。

そしてこれはバーが出る時引っ込む時というアクションに限ったことではなく

バーが引っ込んでいる時、バーが出ている時も

同様の挙動となります。

これを利用してheightにそれぞれのpxを入れてあげたら

上記の問題を対応することが可能になります。

こちらはどこまで対応するか!という部分にはなりますが

覚えておくと便利です。

まとめ

まず、どこまで対応するべきかによって対応方法が異なります。

優先度:低 なんとなくそうなっていればいい

この場合、CSSで行う②(height 100vh)

で対応しましょう。一番手軽なので実装時間がかかりません。

優先度:中 ちゃんとはしたいが、ユーザーのイレギュラーな動作には対応しない

この場合、CSSで行う①(height 100% の継承)

で対応しましょう。

優先度:高 完璧に対応したい

JSで対応しましょう。

以上になります。

それでは今日はここらへんで失礼させていただきます。

ありがとうございます。