[JavaScript] スマホブラウザで、初期表示時にアドレスバーを非表示にして画面を広く使う方法

こんにちは、@yoheiMuneです。
今日は、iPhoneやAndroidのスマホブラウザでWebアプリを作る際のTipsで、 初期表示時にアドレスバー（URLバー）を非表示にして画面を広く使えるようにする方法を紹介したいと思います。

初期表維持にアドレスバーを非表示にする

初期表示時にアドレスバーを非表示にするのは簡単で、onload時に以下のコードを実行する事で実現出来ます。

window.onload = funtion(){
  window.scrollTo(0,0);
}

画面ロード時に擬似的にスクロールを発生させることで、URLバーを非表示にしています。
これは、「端末のスクロール発生時にURLバーを隠す」という機能を、擬似的に発火させるような実装です。

上記方法で上手くいかない場合には

なお一部のAndroid端末ではonload時のスクロールでは上手く動かず、以下のようにする必要がある場合もあるようです。

window.onload = funtion(){
  setTimeout(function(){
    window.scrollTo(0,1);
  }, 1);
}

setTimeoutで少しだけスクロールするタイミングを遅らせるようにしています。
また、1px以上スクロールさせないと反応しない端末があるようで、このような実装になっています。

最後に

以上、簡単なTipsでした。
こーゆう知識の積み重ねがノウハウになるのかなぁと思ってます。
またこんな小さな便利技も知ったら、ブログで紹介したいと思います。

最後までご覧頂きましてありがとうございました。