今日Facebookで歴史好きな偉い人がシェアしてた情報が気になったので早速やってみた。
元ネタはこっち。 Viewport Meta Tag: Minimal-UI
上の記事見たら分かるけど、要はiOS7.1のsafariで画面のUI関連の余計なものをなくしちゃおう的なやつです。
導入は非常にシンプルで、metaのviewportを以下のように変更するだけ
<meta name="viewport" content="width=device-width, minimal-ui">
で、実際にやってみたらこうなりました。
導入前
導入後
変更されているのは、上部のURLの部分がすっきりしたという点と、下にあるパーツ類が削除されたという点。 全体的に画面が広く止めるようになったので、画面を目一杯使って表現したい場合に有効そう。 ただ、問題は確認した限りではiOS7.1のsafariでのみの実装になっているので（2014/3/14現在）、あくまで限定的な使い方になりますが。
ちなみに、元の表示にする場合は画面上部のURL部分を長押しで元の画面に戻ります。
追記 twitterで公開を告知したら早速こもりさんがこんなのもあるよって教えてくれました。 めちゃ優しい。
iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告 minimal-uiの使用上の注意という事で100%指定時のバグを丁寧に解説してくれてます。 実際に確認もしてみましたが、確かに同じ現象を確認できました。 ということで、100%指定して作る場合は今のところはやめといた方が無難ですね。 今後のバージョンアップで改善されるという可能性もありますけど、それを確認してからでも遅くはなさそうです。
