26

私はモバイル用の HTML5 を初めて使用します。現在のアプリで jQuery Mobile を使用していますが、ナビゲーション バーを非表示にするのに問題があります。

このサイトを見つけました: http://m.somethingborrowedmovie.warnerbros.com/ . （映画を宣伝するためにこのリンクを貼り付けることはありません。）

この HTML5 サイトには驚かされました。ナビゲーションバーを非表示にする方法を知っている人はいますか?

メニューも本当によくできています。このようなアプリを構築するためのフレームワークはありますか?

4

4 に答える 4

60

次のことを試してください。

  1. metaHTMLファイルのにこのタグを追加しheadます。

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

  2. iPhoneでSafariを使用してサイトを開き、ブックマーク機能を使用してサイトをホーム画面に追加します。

  3. ホーム画面に戻り、ブックマークしたサイトを開きます。URLとステータスバーはなくなります。

iPhoneで作業するだけでよい限り、このソリューションで問題はありません。

さらに、warnerbros.comサイトのサンプルでは、​​Senchatouchフレームワークを使用しています。あなたはより多くの情報のためにそれをグーグルするか、彼らのデモをチェックすることができます。

于 2011-06-22T19:10:46.900 に答える
34

Remy Sharpは、彼の記事「正しく実行する：iPhoneのURLバーをスキップする」でプロセスについて適切に説明しています。

iPhoneにURLバーを非表示にするのはかなり簡単です。次のJavaScriptを実行する必要があります。

window.scrollTo(0, 1);

しかし、いつの問題がありますか？iPhoneがドキュメントの最初のピクセルまでスクロールできるように高さが正しくなったら、これを行う必要があります。そうしないと、高さが読み込まれ、URLバーが強制的に表示されます。

画像が読み込まれてwindow.onloadイベントが発生するまで待つこともできますが、これが常に機能するとは限りません。すべてがキャッシュされている場合、イベントの発生が早すぎて、scrollToがジャンプする機会がありません。以下はwindow.onloadを使用した例です：http：//jsbin.com/edifu4/4/

私は個人的に1秒間タイマーを使用します。これは、レンダリングを待つ間、モバイルデバイスでは十分な時間ですが、起動が早すぎないように十分な長さです。

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

ただし、これはiPhone（または単にモバイル）ブラウザの場合にのみセットアップする必要があるため、卑劣なスニフ（通常は推奨しませんが、「通常の」デスクトップブラウザが1ピクセルジャンプするのを防ぐためにこれで問題ありません） ）：：

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

これの最後の部分であり、これは私がWebで見たいくつかの例から欠落しているように見える部分です：ユーザーがURLフラグメントに特にリンクしている場合、つまりURLにハッシュがある場合、ジャンプしたくない。したがって、http：//full-frontal.org/tickets#dayconfに移動する と、ブラウザがidがdayconfである要素まで自然にスクロールし、scrollTo（0、1）を使用して先頭にジャンプしないようにします。

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

これをiPhone（またはシミュレーター）http://jsbin.com/edifu4/10 で試してみると、URLフラグメントのないページに到達したときにのみスクロールすることがわかります。

于 2011-05-15T21:16:21.373 に答える
2

これまでに提供されたすべての回答の問題は、何かを借りたサイトでは、上にスクロールしても Mac バーが完全に非表示のままであり、提供された回答ではそれが達成されないことです。

使用しただけscrollToで、後でユーザーが上にスクロールすると、ナビゲーションバーが再び表示されるため、サイト全体を div 内に配置し、スクロールを維持する本体ではなく、その div 内で強制的にスクロールする必要があるようです。任意の方向へのスクロール中にナビゲーション バーが非表示になります。

ただし、Apple デバイスの画面の上部付近をタッチすると、ナビゲーション バーを表示できます。

于 2013-02-27T19:29:30.790 に答える
-3

「#」への単純な JavaScript ドキュメント ナビゲーションで実行できます。

window.onload = function()
{
document.location.href = "#";
}

これにより、ロード時にナビゲーション バーが強制的に削除されます。

于 2014-06-26T14:25:30.690 に答える