イナヅマTVログ

Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定

| 4件のコメント

iOS Safari(mobile Safari)には「ホーム画面に追加」機能があります。
「ホーム画面に追加」に追加したアイコンをタップして起動させた場合はmetaタグを追加でフルスクリーン表示が可能です。
描画エンジンはSafariの様なのですが通常(のSafari)とは違う表示が可能です。

ステータスバーもロケションバーもないアプリのようなフルスクリーン表示が可能です。

<meta name="viewport"
content="width=device-width
, initial-scale=1.0
, maximum-scale=1.0
, user-scalable=no">
 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
 
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon.png"> 
<link rel="apple-touch-startup-image" href="img/apple-touch-startup-image.png">

【viewport】
仮想的なウィンドウサイズ
上記の指定は端末サイズを使用し、ユーザーによる拡大縮小をできなくしています。

【meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”】
ステータスバーの指定
透明を指定しています。

【meta name=”apple-mobile-web-app-capable” content=”yes”】
フルスクリーン
defaultはnoです。

【link rel=”apple-touch-startup-image” href=”img/apple-touch-startup-image.png”】
起動中に表示されるスプラッシュ画像。

【link rel=”apple-touch-icon-precomposed” href=”img/apple-touch-icon.png”】
ホーム画面に表示されるアイコン。
precomposed: 反射光、ドロップシャドウなし、角丸無し

*precomposedでも角丸になるなぁ〜

アイコン、スプラッシュを複数の解像度に対応させる

複数の画像解像度やディスプレイサイズに対応させる必要がある時はmedia属性にMedia Screenで指定したように設定します。
iPhone 4以上の画面密度に対応させたり、iPhone 5から違う画面サイズに対応させたりが可能です。

<!-- iPhone 4 up -->
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon.png"
  media="screen and (-webkit-min-device-pixel-ratio: 2)">
 
<!-- only iPhone 5 -->
<link rel="apple-touch-startup-image" href="img/apple-touch-startup-image.png"
  media="screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2)">

ステータスバーは消せないけどアドレスバー(ロケションバー)ならなんとか…

通常Safari起動して表示するコンテンツではステータスバーは消せないけどアドレスバー(URL text field)ならなんとか消す(消えたように見える)方法があります。
Memo, iOS, Androidブラウザのアドレスバーを消す方法

update 2012-10-24
iOS 6でStandalone mode + Full Screen指定でGeoLocation(GPS)が使えないようです。
Memo, iOS 6 + Standalone mode + Full screen 指定だとGPS(Geolocation)が使えない

【追記】
Android Chrome, iOS 7 Safari では仕様が変わり常時表示に変わってしまったようです。
iOS 7, mobile SafariのURLバーは消せない
Android ChromeのURL barは消せないと知った絶望感

【追記】の【追記】
iOS 7.1 からどうにかなるようです。
iOS 7, mobile SafariのURLバーは消せない(ことも無いらしい)

update 2013-03-09

size属性でtouch-iconを指定

iOS Developer Libraryに下記の記述があった。
Safari Web Content Guide

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

sizes属性で設定できるんだ!
これだと分かりやすい。

iOS 7登場でアイコンサイズが変わりアップデートされてました。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

【追記】
アイコンは適当な大きな画像を1枚用意しておくだけでもiOSの方がいい感じにリサイズしてくれる様子。
自分のブログなんかで適当な感じで構わないときはこれですんじゃうかも。
サイトトップ http://www.inazumatv.com/ は facebook ogp: image と同じものを設定しました。

*相対パスで無く絶対パスで指定します。

update 2013-12-04
gistにiOS 7に対応したmetaタグを公開してくれてる方がいらっしゃいます。
https://gist.github.com/tfausak/2222823
startup image に Retina サイズの指定もあります。
試してないので何とも言えないのですが、Apple の Document では startup image は 320px x 480px が必須らしいけど…

振り分け指定は mediaquery を使うときの設定の参考にもなるかもです。

Apple: Safari Web Content Guide

On iPhone and iPod touch, the image must be 320 x 480 pixels and in portrait orientation.

update 2013-12-07
iOS 7 mobile Safari の standalone mode でスプラッシュ画像が表示されない?
う〜〜ん、どうも表示される様子がない。
なんか設定方法が変わったのかなぁ。

4件のコメント

  1. ピンバック: Memo, iOS, Androidブラウザのアドレスバーを消す方法 « イナヅマTVログ

  2. ピンバック: Memo, mobile Safari各パーツサイズ « イナヅマTVログ

  3. ピンバック: [iOS 6][iOS 7] mobile Safariのstandalone modeでフルスクリーンにするviewport設定 « イナヅマTVログ

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

コメントを残す

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