iOS 7 Safariでアドレスバーとステータスバーを非表示にすることはできますか?


12

iOS 7でアドレスバーとステータスバーを非表示にすることはできますか?

ランドスケープアプリでは、現在、以下のコードを使用して以前のiOSバージョンで実行していますが、IOS 7でも動作します。ページを開くと、全画面表示になり、そのままになります。

JS:

window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

HTML:

<!-- For iOS web apps -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead Story Sync">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

実際のところ、iOS 7のiPhoneおよびiPadでは、画面の下部をタップするとアドレスバーとステータスバーが表示されます。これを取り除く唯一の方法は、電話の向きを変更してから元の向きに戻すことです。とにかくその操作を回避する方法はありますか?


これに関する多くの回答stackoverflow.com/questions/18813476/…–
AllInOne

SOの答えは、ここのサンプルコードよりも有効です。うーん...
bmike

回答:


15

メソッドがあります<meta name="viewport" content="minimal-ui”>
ただし、iOS 7.1でのみ動作します-7.0および8.0では動作しません

ソース:StackOverflow


詳細は、iOS 7.1 beta 2の変更ログとリリースノートから

サファリノート

プロパティ、minimal-uiがビューポートメタタグキーに追加され、ページの読み込み時にiPhoneの上部と下部のバーを最小化できます。minimal-uiを使用しているページで、トップバーをタップするとバーが戻ります。コンテンツを再度タップすると、それらは再び閉じられます。

たとえば、を使用します<meta name=”viewport” content=”width=1024, minimal-ui”>


更新: iOS 7.1(公式最終リリース)でこのメソッドが機能することを確認しました。上記のメタタグソリューションを使用する私のウェブアプリで自分で確認できます。

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


最終リリースを待ってから、試してみてから、あなたの答えを受け入れます。どうもありがとう。
svassr

うーん。私は7.1.1を使用しており、上記のリンクされたWebアプリはロード時にアドレスバーなどを非表示にしません。彼らは7.1.1でそれを破りましたか?
ブライアンB 14

7
これはiOS8で削除されました。
チャーリーシュリーサー14

1
IOS8の実装に関するこの投稿を確認してください:stackoverflow.com/questions/24889100/…–
svassr

1

<meta name="apple-mobile-web-app-capable" content="yes"> これは、UIを非表示にするスタンドアロンモードでサイトを実行することをお勧めします。これが上記のminimum-uiソリューションとどのように比較されるかはわかりません。私は、このソリューションが7.1より前のiOSバージョンでも機能するという印象を受けています。


5
このソリューションは、ホーム画面にアプリとして追加するWebページでのみ機能します。
svassr 14年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.