ページアクセス時にiPhoneとAndroidのアドレスバーを隠す

iPhoneやAndroidのブラウザでサイトにアクセスした際に、ファーストビューでヘッダ部分にページURLなどの情報を持ったアドレスバーが表示されたままになります。

上の写真のようにヘッダにアドレスが表示された状態になっていますね。
この状態からフリックして画面を下にスクロールすると、アドレスバーは消えます。

スマートフォンは画面サイズが小さく、その限られたスペースにアドレスバーが居座るのを嫌うユーザもいます。特にデザイナは、ファーストビューでそのサイトデザインとは関係のないアドレスバーがヘッダに表示されるのはあまり気分が良くないようです。

JavaScriptでアドレスバーを消す

アドレスバーですが、指で少しでもスクロールさせると自動的に消えます。
その性質を利用して、画面起票時にJSで1pxでもスクロールさせてしまえば、アドレスバーは消えてくれるはずです。

setTimeout(scrollTo, 100, 0, 1);

JavaScript関数「setTimeout」についておさらいですが、第一引数で指定した関数名「scrollTo」を第二引数「100」（ミリ秒）後に1回実行します。第三引数以降は「scrollTo」の引数になります。
つまり、x=0、y=1の位置まで画面を移動させる関数「scrollTo(0, 1)」を0.1秒後に1回実行します。

簡単にいうと、画面を表示して0.1秒後に1pxスクロールさせることを意味しています。
結果的には画面を開いて0.1秒後にアドレスバーを隠します。画面が表示される前にJSが実行されると効果がないので、0.1秒程度の遅延が必要なようです。

問題点は確実な方法ではないということ

そもそも、スマホのブラウザにアドレスバーを隠す機能があり、そのスイッチを直接押しているわけではないので、このアイディアは暫定的な手法です。

また、この方法の問題点として、コンテンツの高さが画面の高さより小さく、縦スクロールする余裕がない場合はアドレスバーは消えません。
ただ、私の経験上、スマートフォンでそんなコンテンツの薄いページはほとんどありませんでしたが。

さらに、現在Androidの端末は多くリリースされており、ブラウザアプリもいろいろと出ています。そんな中、この方法が全ての環境で有効なのか検証したわけではありません。
これも私の経験になりますが、今のところこの方法が有効でない端末には出会っていません。

とりあえず、現時点できわめて有効な手法ではありますが、必ずしも万全とは言い切れません。
今後の新機種の動向なども見ながら、他により良い方法がないかアンテナははっておきます。