イナヅマTVログ

Memo, iOS, Androidブラウザのアドレスバーを消す方法

| 4件のコメント

スマホサイトで上の方にどかんと居座ってじゃまなブラウザのアドレスバー(Address bar)URLバー(URL bar)を消す方法。
JavaScriptを使うしか方法が無いらしい。

JavaScript(jQuery使用)

(functino (window, $) {
    $(window).on('load', function () {
        setTimeout(scrollTo( 0, 1), 0);
    });
}(window, jQuery));

scrollTo( 0, 1 )setTimeoutで実行させるのがキモらしい。
参考:Hide the Address Bar within Mobile Web Applications

iOS, Android両方に対応可能。
ま、消すって言うよりアドレスバーの下までスクロールさせてるだけ。

MDN: window.scrollTo

window.scrollTo(x-coord, y-coord)

x-coord : 左上を基準にした表示させたい文書の水平軸上のピクセル値
y-coord : 左上を基準にした表示させたい文書の垂直軸上のピクセル値

【気がついた副作用】
Androidブラウザだとアドレスバーが完全に隠れるとURLを変更やブックマーク登録などのコントロールが不可能になるのでよろしくないように思う。
訂正
操作はできました。
著しく操作性が悪いけど…

・副作用2
*著しくロード完了が遅くその間にユーザーがスクロールしちゃうとマズイ。
せっかくスクロールしたのにトップに戻っちゃう。
scrollBy使うと相対移動なので良さそう(まだ試してない)。

setTimeout(scrollBy( 0, 1), 0);

MDN: window.scrollBy

【注意点】
body内のコンテンツがウインドウ高よりも高くないとビクとも反応しない。
完全にウインドウにフィットさせるためにはウインドウの高さを測定しアドレスバー高を足したサイズを内包コンテンツの高さにしないといけない。
オリエンテーションにも対応させないと…
iOSとAndroidだとアドレスバーの高さが微妙に違うのでuserAgent判定しないと。
これはまた別の機会にします。

【おまけ】
アドレスバーの高さ
iOS: 60px
Android: 56px;

【おまけのおまけ】
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定」と合わせて使うと吉。

update 2012-11-22
Android 4で登場したGoogle謹製Chromeは消せないらしい。
Android ChromeのURL barは消せないと知った絶望感

update 2014-11-28
iOS 8の登場でmobile Safariでも道は閉ざされました。
iOS 7, mobile SafariのURLバーは消せない(ことも無いらしい)でもやっぱりダメみたい