web-dev-qa-db-ja.com

iPhoneでアドレスバーを非表示にするにはどうすればよいですか？

IPhoneでアドレスバーを非表示にするにはどうすればよいですか？

これまでに2つの異なる方法を試しました。

  • ページの読み込み時にJavaScriptを使用してスクロールダウンする1ピクセルのトリック

  • そして、次のメタタグ：

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="Apple-mobile-web-app-capable" content="yes" />

これも：

<meta names="Apple-mobile-web-app-status-bar-style" content="black-translucent" />

私は完全に混乱しています。

PS：ああ、私は本当に重要なことを忘れていました：Webページ自体はブラウザウィンドウをオーバーフローさせません。これがおそらく、1ピクセルのスクロールダウントリックが機能しない理由です。

デザインについてのヒットは誰もがスクロールできるので、私はそれを大きくすることはできませんが、このページは折り畳まれます... :)

javascriptiphonehtmlcsssafari
27
Peter Szabo

私は自分でこれを打ちました。アドレスバーが非表示になっていない場合、ページがスクロールするのに十分な長さではない可能性があります。

とき

window.scrollTo(0,1)

ページと呼ばれます[〜＃〜] must [〜＃〜]スクロールイベントが発生するように、ウィンドウより長くする必要があります。

スクロールが発生した場合にのみ、モバイルサファリはアドレスバーを非表示にします。

64
rob

最近のiOSバージョンで何かが変更されていない限り、スクロールダウントリックは確実に機能する唯一のものです。 このバージョン には問題がありません。

/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() {
  window.scrollTo(0, 1);
}, 1000);​

私はこの特定のページの他のモバイルプラットフォームを気にしませんでしたが、エージェントに基づいてリダイレクトしていました...具体的にiPhoneをチェックするために正規表現を変更したい場合があります置換/mobile/ with /iPhone/。

9
Nick Craver

UPDATE：Apple 削除済み iOS 8のminimal-uiのサポートもはや有用な答えではありません:(

これを検討している新しいグーグル向け：iOS 7.1現在、モバイルSafariで動作する新しいminimal-uiモードがあります：

minimal-ui

ビューポートでminimal-uiプロパティを設定することで有効になります：

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

次のような他のプロパティと組み合わせて使用​​することもできます。

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

注目すべきは、scrollToハックの場合のように、コンテンツの最小の長さの要件はありません。この新しいモードのすばらしい概要があります こちら 。 （それが上の画像の由来です。）彼はいくつかの欠点もリストしています。

私がこれについて見つけることができる唯一の公式ドキュメントは、 AppleのiOS 7.1リリースノート のメモです。

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

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

もちろん、これはiOS 7.1以上でのみ動作するため、その有用性は制限される可能性があります。

6
markquezada

このバージョンの方が実際に良いと思います。ユーザーが既にスクロールを開始しているかどうかをテストします。これは、モバイルプロジェクトで気づいた問題です。

/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
    if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);
5
Simon East

私もこのフルスクリーンWebアプリで検索しましたが、これを見つけました。

http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/

1.基本的に、ヘッダーに以下を追加する必要があります：

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />

//App name
<meta name="Apple-mobile-web-app-title" content="App name" />

<meta name="Apple-mobile-web-app-capable" content="yes">

<meta name="Apple-mobile-web-app-status-bar-style" content="black" />

//APP ICONS 
<link rel="Apple-touch-icon" href="/img/icon.png">

<link rel="Apple-touch-icon" sizes="76x76" href="/img/icon.png">

<link rel="Apple-touch-icon" sizes="120x120" href="/img/icon.png">

<link rel="Apple-touch-icon" sizes="152x152" href="/img/icon.png">
  1. Safariでサイトを開く
  2. URLバーの更新ボタンの横にある[アプリケーションから開く]アイコン（上向き矢印とその下のボックス）をタップします
  3. 「ホーム画面に追加」を選択します
  4. ホーム画面に移動して「アプリ名」を開きます
  5. 出来上がり！ URLバーやナビゲーションボタンのないウェブサイト！
3
mmw5610
<meta name="Apple-mobile-web-app-capable" content="yes" />

iPhoneのWebアプリケーションの設定

2
Creatorus

タイムアウトを使用する代わりに、サイトコンテンツの準備ができたら関数を実行できます

addEventListener("load", function() {
    window.scrollTo(1, 0);
}, false);
2
herson

試してください：

_setTimeout(function () {
  window.scrollTo(0, 1);
}, 1000);
_

JQueryを使用する場合は、$(document).ready();の最後に配置します。タイムアウトにより、ブラウザはページの高さを決定できます...

2
Mike

これらのソリューションがどれも機能せず、あなたが私が直面した非常に狭い問題に直面している場合、ここでそれを修正したものがあります。

私はこれを私のCSSに持っていました

html{position: relative; height: 100%; overflow: hidden;}

このcssは自分のページの1つにのみ修正を適用するため、そのページに条件を付けて修正し、アドレスバーは他のすべてのページで正しく動作するようになりました。

1
Mo Alsaedi

コンテンツがブラウザウィンドウより大きくなければ解決されないと思います。

ロード時、向きの変更時、タッチスタート時にURLを非表示にするコードを次に示します（タッチスタートは、永続的な非表示URLがある場合にのみ使用する必要があります。スクリプトのその部分を削除します）。

if( !window.location.hash && window.addEventListener ){
    window.addEventListener("load", function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "orientationchange",function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "touchstart",function() {
         setTimeout(function(){
             window.scrollTo(0, 0);
         }, 0);
     });
}
1
foliomobshawn