iOS 6になってiPhone 5以降の縦長画面でstandalone modeで起動してもiPhone 4のサイズにしかならず上部に余白ができるのなんでかなーっと思ってたのを解決できたのでメモ。
多分ちゃんとgoogle先生にお尋ねすれば直ぐに答えは見つかったんだろうけど…
Memo, iOS 6 + Standalone mode + Full screen 指定だとGPS(Geolocation)が使えない
このころから悩んでたんだなー
*standalone mode
ホーム画面に追加で追加したアイコンから起動し表示された状態。
meta apple-mobile-web-app-capable を yes にする。
<meta name="apple-mobile-web-app-capable" content="yes"> |
viewportにwidth設定しない
viewport へ width=device-width を習慣的に入れてたのがまずかったようです。
width指定をとると上部の余白がとれちゃんとフルスクリーン表示可能になりました。
<meta name="viewport" content="initial-scale=1.0"> |
代わりに initial-scale=1.0 を設定しました。
*追記
width=device-widthを指定してもinitial-scale=1.0が設定されていれば良いようです。
iOS 7ではblack-translucentが効かない
iOS 7ではblack-translucentは透明
*間違ってました。
透明になるのは結果でblack-translucent設定ができないようです。
status bar(上部のアンテナとかバッテリー残量が表示されているとこ)に black-translucent を設定すると iOS 7 からは以前の半透明黒ではなく文字通りstatus barは透明になります。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
【追記】
black-translucent 設定が効かないという情報があります。
stackoverflow: iOS 7 web app status bar
default を設定するとstatus barは非表示になります。
*バッテリー残量表示は残ります。
Status bar高さは20pxです。
— 【追記】ここまで —
以前作ったthree.jsのサンプルファイルのmetaを書き換えました。
FxUG@Fukuoka 「three.jsはじめましょ」LT資料を公開しました
ホーム画面に追加して表示させるとフルスクリーンになります。
点と線 + 点アニメーション(点のスケール + 点の色遷移 + 全体を回転)
status bar 透明になるの微妙だな〜
文字が白なので背景が黒だと見えるけど白っぽいと残念な感じ
消したり、他の色に変えたりできないのかなー。
ドキュメントあさってるけど見つけられない。
Safari HTML Reference: apple-mobile-web-app-status-bar-style
Safari Web Content Guide: Changing the Status Bar Appearance
Safari Web Content Guide: Viewport Settings for Web Applications
【おまけ】
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定
こんな記事も有ります。
ピンバック: Memo, iOS 6 + Standalone mode + Full screen 指定だとGPS(Geolocation)が使えない « イナヅマTVログ
ピンバック: iOS 7, mobile SafariのURLバーは消せない « イナヅマTVログ