web-dev-qa-db-ja.com

iPhone / iPod touch向けSafari iOS 7のナビゲーションバーを非表示にできない

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

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

これまでに発見した唯一の解決策は、ユーザーに以下を強制することです。

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

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

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

javascriptioshtml5ios7safari
78
asv2001

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のブラウザchromeを永久に非表示にする場合は、ユーザーにWebアプリをホーム画面に追加するか（適切なメタタグが<meta name="Apple-mobile-web-app-capable" content="yes">を設定して）使用する必要がありますPhonegapのようなネイティブアプリラッパーのようなもので、App Store経由で配布します。

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

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

118
thomasfuchs

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

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

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

17
Mark

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

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

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

6
mex23

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

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

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

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

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

-

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

今日の希望。 Apple開発者プログラムのメンバーである場合は、このフォーラムにアクセスすることを強くお勧めします。 https://devforums.Apple.com/message/927476

W

3
William George

編集2：

IOS 7.1以降では機能しません

編集：

一部のゲームでは、オーバーレイが採用されています プレーヤーがバーをスクロールするように指示します 。その後、バーが再び表示されるまでスクロールをロックします。この場合、position: fixedは動きを安定させるので大いに役立ちます（よりうまく説明することはできません。自分で試してみてください）。このゲームはそのようなアプローチの良い例です。

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

最近、トップエリアのナビゲーションバートリガーを無効にするハックに出くわしました。必要なのは、次のスタイルでランダムな要素をDOMに追加することだけです。

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


詳細についてはこちらをご覧ください こちら 。

2
Mihhail

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画面に表示されるインジケータ。

enter image description here

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

1
f1lt3r

この解決策は私にとってはうまくいきましたが、私の場合、webappは私が使用するiPadを制御できるプライベートパブリック用でした。

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

枠を超えて考えて、私たちのチームはニースのソリューションに到達しました：

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

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

UPDATE

私の開発者の友人がこのソリューションを思いつきました：

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

0
Brover

これが誰かの助けになることを願っていますが、iPhone 4では480pxなので、すべてのデバイスでゲームを800pxにしたいので、viewport width = device-width ..を設定したくありませんでした。

また、設定しない場合、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ボタンは、ユーザーが画面の上部/下部をクリックした場合にのみ表示されます。今すぐ大好き。

0
jfaron