web-dev-qa-db-ja.com

iPhone / HTML5でナビゲーションバーを完全に非表示にする方法

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

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

このHTML5サイトに驚いたばかりです。誰かがナビゲーションバーを隠すために使用される方法について何か知っていますか？

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

html5mobileiphone-standalone-web-app
26
Luc

以下を試してください：

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

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

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

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

IPhoneでのみ作業する必要がある限り、このソリューションで十分です。

さらに、warnerbros.comサイトのサンプルでは Sencha touch framework を使用しています。 Google it で詳細を確認するか、 デモをご覧ください で確認できます。

59
Minh Le

レミー・シャープは彼の記事でプロセスの良い説明をしている 「それを正しくする：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);

これの最後の部分であり、これは私がウェブで見たいくつかの例から欠落しているように見える部分です：ユーザーが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/1 すると、URLフラグメントなしでページに到達したときにのみスクロールすることがわかります。

34
bnabilos

これまでに与えられたすべての答えの問題は、何かを借りたサイトでは、スクロールアップ時にMacバーが完全に隠されたままになることです.scrollToソリューションを使用してからユーザーがスクロールアップすると、ナビゲーションバーが再び表示されますスクロールしているdiv内にサイト全体があるので、ページをスクロールする代わりにdiv内のみをスクロールし、ナビゲーションバーを非表示にします。ナビゲーションバーを表示する唯一の方法は、画面の上部をタッチすることです。

1
EmmaGamma