イナヅマTVログ

[iOS 6][iOS 7] mobile Safariのstandalone modeでフルスクリーンにするviewport設定

| 2件のコメント

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-capableyes にする。

<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資料を公開しました
ホーム画面に追加して表示させるとフルスクリーンになります。
点と線 + 点アニメーション(点のスケール + 点の色遷移 + 全体を回転)
standalone mode

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タグやスプラッシュ画像の指定
こんな記事も有ります。

2件のコメント

  1. ピンバック: Memo, iOS 6 + Standalone mode + Full screen 指定だとGPS(Geolocation)が使えない « イナヅマTVログ

  2. ピンバック: iOS 7, mobile SafariのURLバーは消せない « イナヅマTVログ

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください