WebViewでモバイルHTML5を使用する際に注意すべき点は何ですか?

注意事項: 1. クリックやマウスアップなどのマウス イベントには 200 ミリ秒の遅延があります。タッチ イベントを使用して Quo.js イベントを参照できます。2. 「:active」とは互換性がありません。 css3 の属性を変更する必要があるため、変更が必要です。 設定; 3. html と body のスクロールのみをサポートしており、互換性などの処理が必要です。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

モバイル デバイス、特にタッチ スクリーンやその他のスマートフォンでは、埋め込みブラウザ Web ビューで HTML ページを表示する必要があります。したがって、HTML ページを開発するときに注意する必要があることがいくつかあります。ポイント:

1. Web ビューでは、クリック、マウスアップ、マウスダウンなどのマウス イベントに対して 200 ミリ秒の遅延が発生します。タッチ イベントを使用することをお勧めします。都合がよければ、クイック クリック効果を満たすために Quo.js イベント (サイズ 3KB) を引用してください;

2. CSS3 の :active 属性は Webview と互換性がありません。クラス active をタッチスタートとtouchend イベントを追加し、CSS に .active を追加します。

3. 現在、Android の Webview は html と body のスクロールのみをサポートしています。他の div およびその他の要素については、overflow:scroll を使用しても div をスクロール可能にすることはできません。互換性がある必要があります。

処理方法は 2 つあります。

1 つ目は iscroll.js プラグインを使用する方法ですが、このプラグインはすべてのデフォルト イベントを自動的にブロックするため、注意;

次に、DIV 要素のタッチ イベントとドラッグ イベントを監視して、スクロール効果をシミュレートします。具体的な方法については、noBarsOnTouchScreen.js

4 を参照してください。アプリのような効果を実現するには、特に同じ Web ページの異なるモジュール内のページの変換で、効果をローカル アプリケーションの効果に近づけるために、プラグイン pagetransitions.js をここで推奨します (添付ファイルの pagetransitions を参照) 。ジップ）。

css3 アニメーションを使用して各ページをスムーズに変換できるため、同じ Web ページをさまざまなアニメーション効果で変換できます。

関連する推奨事項:「html ビデオ チュートリアル」

以上がWebViewでモバイルHTML5を使用する際に注意すべき点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。