4

各セクションに 100vh を使用する Web サイトを構築しています。ただし、モバイル ブラウザーでは、アドレス バーの非表示/表示に伴ってビューポートの高さが増減するため (Chrome など)、UI の不具合につながります。スクロール時にアドレスバーが自動的に非表示になるのを防ぐ方法はありますか?

Freelancer Web サイトには、これを修正する実装があります。誰かがこれがどのように行われるか説明できますか? https://m.freelancer.com

4

1 に答える 1

2

スクロール時にアドレスバーが自動的に非表示になるのを防ぐ方法はありますか?

残念ながら、HTML やコードからアドレス バーを固定する方法はありません(少なくとも私は知っています)。

「フェイク」フルスクリーンモード:

代わりに、ページの読み込み時にアドレスバーを強制的に非表示にして、フルスクリーンのエクスペリエンスを向上させることを検討できます。

明らかに、これは最初にページをロードして下にスクロールしたときにのみ適用されます。もう一度上に戻ると、アドレスバーが表示されます。

モバイル向けに設計されたサイトのほとんどでは、ユーザーが何度も下にスクロールしてから別のページに移動する必要があることがよくあります。

方法は次のとおりです。

簡単なスクリプトを作成し、「フルスクリーン」にしたいページで使用します。または、サイトの残りの部分で使用するテンプレート ページがある場合は、そのスクリプトを使用します。

以下を使用できます。

<script type="text/javascript">
    window.onLoad = function() {        
        window.scrollTo(0,1);
    }
</script>

または、jQuery を使用している場合:

<script type="text/javascript">
    $(function() {
        $(window).scrollTo(0,1);
    }
</script>

これにより、ブラウザーは、ページが読み込まれたときに既にスクロールしたと見なされ、アドレス バーが自動的に非表示になります。これは、特定のブラウザでは機能する場合と機能しない場合があります。

繰り返しますが、これは「スクロール時にアドレスバーが自動的に非表示になるのを防ぐ」ことに対する直接的な回答ではありませんが、これにより、最初にページにアクセスしたときのユーザー エクスペリエンスが向上する可能性があります。

http://www.html5rocks.com/en/mobile/fullscreen/を参考にしました - 見たところ、他にもたくさんのアイデアがあります。

お役に立てれば！:)

アップデート：

私はこの件についてさらに掘り下げましたが、ブラウザを強制的に「フルスクリーン」にしたり、「上」にスクロールしたときにアドレスバーが再表示されないようにする方法が他にもあるようです。 .

いくつかの（たくさんの）提案については、http ://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803 を参照してください。

于 2016-06-25T21:24:46.373 に答える