iOS, Android ブラウザのURL Text Field(Address bar)を非表示（みたい）にするためのゴニョゴニョした話をまとめてみました。
個人的にはブラウザのURL Text Field(Address bar)があってもイイと思うけど、アプリには無いから「消して」なオーダーは少なからずあったりするので調べたりしました。
でもOSバージョンやブラウザ種類で対応方法が変わったりし、その度に右往左往させられブログ記事も追記につぐ追記になったりして分かりにくくなってしまいました。
現時点での最新版 Android Chrome, iOS Safari どちらも scrollBy / scrollTo で非表示のように見せかける手法は使えなくなっています。
結論は、消したりはダメだってとこに落ち着くんだけど何か方法があるのかなぁー
- 2012.09.25
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定 - 2012.09.26
Memo, iOS, Androidブラウザのアドレスバーを消す方法 - 2012.11.21
Android ChromeのURL barは消せないと知った絶望感 - 2013.09.27
iOS 7, mobile SafariのURLバーは消せない（ことも無いらしい）でもやっぱりダメみたい - 2013.10.22
[iOS 6][iOS 7] mobile Safariのstandalone modeでフルスクリーンにするviewport設定
調べるたんびに忘れないように書いてた、結構ある。
OS のアップデートで内容は古くなってます。
Android Chrome
developer.chrome.com
FAQ Chrome for Android
Can I hide the address bar?
The address bar hides automatically when you scroll down. Web apps that are installed using the Add to Homescreen feature don’t display the address bar.
address bar はスクロールダウンすると自動的に消える。
Homescreen feature（Manifest）で非表示（フルスクリーン）にできる。
らしい。
W3C: Manifest
JSON ファイルを準備。
W3C, EXAMPLE 1: typical manifest
{
"name": "Super Racer 2000",
"short_name": "Racer2K",
"icons": [{
"src": "icon/lowres",
"sizes": "64x64",
"type": "image/webp"
}, {
"src": "icon/hd_small",
"sizes": "64x64"
}, {
"src": "icon/hd_hi",
"sizes": "128x128",
"density": 2
}],
"scope": "/racer/",
"start_url": "/racer/start.html",
"display": "fullscreen",
"orientation": "landscape"
} |
でHTMLは
W3C, EXAMPLE 2: linking to a manifest
<!doctype> <html> <title>Store finder - search</title> <!-- Startup configuration --> <link rel="manifest" href="manifest.json"> <!-- Fallback application metadata for legacy browsers --> <meta name="application-name" content="Store Finder"> <link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico"> <link rel="icon" sizes="512x512" href="hi_def.png"> |
manifest.jsonに対応していないブラウザ用に“Fallback application metadata for legacy browsers”以下のタグを用意するのね。
caniuse.com: manifest
スマホ・ブラウザだと使えそう。
ちゃんと使ったこと無いからどんな落とし穴待ってるか分からないけど…
Android ChromeのURL barは消せないと知った絶望感の時に見た FAQ – Chrome for Android と内容が変わっていて、
Can I hide the URL bar? って項目が無くなってる。
スクロールダウンすると自動的に非表示になるし、おまえら分かってるよな、てな感じで無駄なこと考えるなよってことなのでしょうか。
iOS Safari
iPad はもともと scrollBy / scrollTo 手法には非対応なので初めから諦めるのが肝心なのかと思ってます。
iPhone も iOS 7 の登場で不可となりました。
Appleの気の迷いで iOS 7.1 で登場した “minimal-ui” も iOS 8 で使えなくなってしまいました。
developer.apple.com: iOS 8 iOS 8 Release Notes WebKit
- iOS 7 未満
scrollBy / scrollTo 使用可能。 -
iOS 7.1
viewport へ minimal-ui 設定可能。 -
iOS 7.0x, 8.0 以上
なにもできない。
個人的にはジタバタしないでおとなしく何もしないのがよろしいと思います。
どうしてもって時は古い OS ブラウザのために scrollBy / scrollTo しておいても良いかもです。
Configuring Web Applications
Apple Document のここらあたりにも書いてあります。
developer.apple.com: Safari Web Content Guide
スマホ・ブラウザのアドレスバーを隠すのは無理って早く常識になるといいね、ってことでお終い。