javascript/css/html を使用してプログラムでバーを非表示にする解決策はないと思いますが、問題を説明してみましょう。私たちはモバイルゲーム開発者のチームで、1 年間ゲームを開発しています。
iOS 7 の発表後、ナビゲーション バーを非表示にできないという問題に直面しました。ユーザーが Safari ブラウザーの上部または下部をタップすると、ナビゲーション バーが再び表示され、ゲームのすべてのコントロールが非表示になります。
これまでに見つけた唯一の解決策は、ユーザーに次のことを強制することです。
これらの代替手段はどれも受け入れられません。Apple はこの問題を認識しているようですが、無視し続けています。報告されたバグは、バグ #14076889 の重複としてクローズされました。
同じ問題を抱えているチームは私たちだけではないと思います。誰かが解決策を知っていますか？
2014 年 9 月の更新: iOS 8 ではこのminimal-ui機能
が削除されました。既定のブラウザーの動作に依存する以外に、ナビゲーション バーを削除/非表示にする方法はありません (スクロール時にバーは非表示になりますが、スクロール要素がBODYページの である場合のみ)。唯一の「回避策」は、アプリをホーム画面に保存し、適切なメタ タグを設定することです (以下を参照)。
2014 年 8 月の更新: iOS 8 (ベータ) はサポートされなくなりましminimal-uiた。回避策はありません。(この理由は、人々が離れて移動するのを防ぐためにそれを使用した Web サイトによる悪用が原因である可能性があります。ただし、まだ公開されていない iOS 8 Safari には、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 などのネイティブ アプリ ラッパーを使用して配布する必要があります。アプリストア。
個人的には、iOS 6 Mobile Safari のランドスケープ モードに導入された「フル スクリーン」ボタンが削除されていなかったらよかったのにと思います。これは、開発者とユーザーを満足させる優れたソリューションでした。
これをより恒久的に解決するための最適な候補は、Mobile Safari が HTML5 フルスクリーン API をサポートすることです (これは OS X の Safari でサポートされています!)。悲しいかな、現在サポートはなく、歴史的に iOS のポイント リリースでは新しい Safari 機能が追加されていないため、iOS 8 向けのものかもしれません。
更新:リリース ノートに関するこのフォーラムの投稿によると、現在 iOS7.1 ベータ版でこれを修正するためのメタ プロパティがあります。
<meta name="viewport" content="minimal-ui">
テストを実行したところ、この機能が現在ベータ 2 であることを確認できました。
注: 新しい minimum-ui オプションは優れたソリューションですが、HTML 応答の一部である必要があります。iOS7.1 beta3 でビューポートのメタタグに JS を追加してみました
$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');
ブラウザは値「minimal-ui」を無視します。
編集2：
iOS 7.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;
詳しくはこちらをご覧ください。
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 画面に表示されるインジケーター。
この解決策は私にとってはうまくいきましたが、私の場合、webapp は、使用される iPad を制御できるプライベート パブリック用でした。
考えられるすべてのメタ タグとハックを使用しようとしましたが、実際には、IOS8 がminimal-ui 機能を削除した後、解決することは事実上不可能でした。
既成概念にとらわれずに考えた結果、私たちのチームは素晴らしい解決策にたどり着きました。
Mercury ブラウザはフルスクリーンで開き、ページが課金されている場合でも、アドレス バーは表示されません。それは右下の小さなアイコンだけです:)それは私たちの問題に対して完全に機能しました!
ただし、繰り返しますが、一般向けの Web アプリケーションを開発している場合は使用しないでください。ユーザーが別のブラウザーをダウンロードしてアプリにアクセスするように強制するのは、UX にとってひどいことです。
アップデート
私の開発者の友人がこの解決策を思いつきました：
appcelerator から Titanium 内の webview を使用します。Apple Store では承認されませんが、プライベート イベントでは問題なく動作します。