iPhone / iPodtouch用SafariiOS7でナビゲーションバーを非表示にすることはできません

Question 1

javascript / css / htmlを使用してプログラムでバーを非表示にする解決策はないと思いますが、問題について説明してみましょう。私たちはモバイルゲーム開発者のチームであり、1年間ゲームを開発しています。

iOS 7の発表後、ナビゲーションバーを非表示にすることは不可能であるという問題に直面しました。ユーザーがSafariブラウザーの上部または下部をタップすると、ナビゲーションバーが再び表示され、ゲームのすべてのコントロールが非表示になります。

これまでに見つけた唯一の解決策は、ユーザーに次のことを強制することです。

デバイスを回転させる
ページをスクロールする
ホーム画面にアプリケーションを追加する

これらの選択肢はどれも受け入れられません。Appleはこの問題を認識しているようですが、無視し続けています。報告されたバグは、バグ＃14076889の複製としてクローズされました。

同じ問題を経験しているのは私たちだけではないと思います。誰かが解決策を知っていますか？

Question 2

2014年9月の更新：iOS 8でminimal-ui機能 が削除されましたデフォルトのブラウザの動作に依存する以外に、ナビゲーションバーを削除/非表示にする方法はありません（スクロール時にバーが非表示になりますが、スクロール要素がBODYページの場合のみです）。唯一の「回避策」は、アプリをホーム画面に保存し、適切なメタタグを設定することです（以下を参照）。

2014年8月の更新：iOS 8（ベータ版）はサポートしなくなりましたminimal-ui。回避策はありません。（これは、ユーザーがナビゲートするのを防ぐためにそれを使用したWebサイトによる悪用が原因である可能性があります。iOS8Safariには、まだ公開されていない新機能があり、それに代わるものがある可能性がありますminimal-ui。）

iOS 7.1は、この問題を解決するために新しいAPIを追加しました。

<meta name="viewport" content="minimal-ui">

この新しいビューポートフラグは、デフォルトでSafari UIを非表示にします（URLとSSLインジケーターのある小さなタイトルバーのみが表示されます）。Safari UIにアクセスするには、ユーザーはこのタイトルバーをアクティブにタップする必要があります。

iOS 7.0.xには、これに対するAPIまたは既知の回避策がないことに注意してください。これらのバージョンでは、Safariのブラウザークロムを永続的に非表示にする場合は、ユーザーにWebアプリをホーム画面に追加してもらうか（適切なメタタグを設定して<meta name="apple-mobile-web-app-capable" content="yes">）、Phonegapなどのネイティブアプリラッパーを使用して配布する必要があります。 AppStore。

個人的には、iOS 6 Mobile Safariのランドスケープモードで導入した「フルスクリーン」ボタンを削除していなかったらよかったのですが、これは開発者とユーザーを満足させる素晴らしいソリューションでした。

これをより永続的に解決するための完璧な候補は、Mobile SafariがHTML5フルスクリーンAPI（OS XのSafariでサポートされている！）をサポートすることです。残念ながら、現時点ではサポートがなく、歴史的にiOSポイントリリースは新しいSafari機能を追加していなかったので、おそらくそれはiOS8の何かです。

Question 3

更新：リリースノートのこのフォーラム投稿によると、現在iOS7.1ベータ版でこれを修正するためのメタプロパティがあります。

<meta name="viewport" content="minimal-ui">

テストを実行しましたが、この機能が現在ベータ2にあることを確認できます。

Question 4

注：新しいminimal-uiオプションは優れたソリューションですが、HTML応答の一部である必要があります。iOS7.1 beta3で、ビューポートメタタグにJSを追加してみました

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

値「minimal-ui」はブラウザによって無視されます。

Question 5

更新：iOS7.1がリリースされたため、NDAが解除されました。

<meta name="viewport" content="minimal-ui">

確かに正しいタグであり、ライブリリースで機能します。必要に応じて、「ビューポート」でカンマ区切りのリストをサポートできることに注意してください。

他のモバイル変数と組み合わせて、ウェブサイトをアプリのように感じさせます。

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

私たちもこれに苦労しています。私たちのサイトにはTabBarがあり、タブをクリックしようとするたびにサファリコントロールがポップアップします。

今日の希望。アップルデベロッパプログラムのメンバーである場合は、次のフォーラムにアクセスすることを強くお勧めします：https：//devforums.apple.com/message/927476

W

Question 6

編集2：

iOS7.1以降は機能しません

編集：

一部のゲームでは、プレーヤーがバーをスクロールして離れるようにヒントを与え、バーが再び飛び出すまでスクロールをロックするオーバーレイを採用しています。この場合position: fixed、動きが安定するため、非常に役立ちます（これをうまく説明することはできません。自分で試してみる必要があります）。このゲームはそのようなアプローチの良い例です：

www.paf.com/mobile/launch/flowers.html（申し訳ありませんが、2つ以上のリンクを投稿することはできません）

最近、ナビゲーションバーのトリガーを無効にするハックに遭遇しました。トップエリア。あなたがしなければならないのは、以下のスタイルであなたのDOMにランダムな要素を追加することです：

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

詳しくはこちらをご覧ください。

Question 7

Webアプリを作成している場合は、ホーム画面からURLへのリンクを作成できます。次のHTMLメタタグを使用します。

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

これにより、ヘッダー/ナビゲーションバーにインジケーターが重ねられます。（すべてのiPad画面に表示されるインジケーター。

ここに画像の説明を入力してください

詳細については、https：//developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.htmlを参照してください。

Question 8

これが誰かに役立つことを願っていますが、ビューポートの幅=デバイス幅を設定したくありませんでした。iPhone4では480ピクセルであり、すべてのデバイスでゲームを800ピクセルにしたいからです。

また、設定しないと、minimal-uiは登録されません。

私の回避策は次のとおりです。

<meta name="viewport" content="width=device-width, minimal-ui">

そして、ページがロードされたらビューポートを変更します。

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

私はそれがうまくいくことにかなりショックを受けています。アドレスバーと下部のUIボタンは、ユーザーが画面の上部/下部をクリックした場合にのみ表示されます。今それが大好きです。

Question 9

このソリューションは私にとってはうまくいきましたが、私の場合、webappは、使用されるIpadを制御できる個人向けでした。

考えられるすべてのメタタグとハックを使用しようとしましたが、IOS8がminimal-ui機能を削除した後は、実際に解決することは不可能でした。

既成概念にとらわれずに考えると、私たちのチームは素晴らしい解決策に到達しました。

Mercuryブラウザが全画面で開き、ページが課金されている場合でも、アドレスバーは表示されません。これは右下にある小さなアイコンであり、:)問題に対して完全に機能しました。

ただし、繰り返します。一般向けのWebアプリを開発している場合は、使用しないでください。UXがユーザーにアプリにアクセスするために別のブラウザーをダウンロードするように強制するのはひどいことです。

更新

私の開発者の友人がこの解決策を思いついた：

appceleratorからTitanium内のWebビューを使用します。Appleストアでは承認されませんが、プライベートイベントの場合は問題なく動作します。