ウェブアプリに関するおすすめの方法

モバイル デバイス向けのウェブページやアプリケーションの開発には、 パソコンのウェブブラウザ用のウェブページの開発に 役立ちます次のベスト プラクティスは、 Android やその他のモバイル デバイス向けの最も効果的なウェブ アプリケーションです。

  1. ウェブサイトの専用のモバイル版にモバイル デバイスをリダイレクトします。Google の各種プロダクトには、 サーバーサイドのリダイレクトを使用する方法です。一般的な方法の一つは、 ウェブブラウザが提供するユーザー エージェント文字列。確認する サイトのモバイル版を配信するかどうかで、「mobile」というラベルの文字列を使用します。
    2. <ph type="x-smartling-placeholder">
  2. HTML5 を使用する おすすめしますHTML5 は、モバイルサイトで使用される最も一般的なマークアップ言語です。 この規格は、モバイル ファーストの開発を促し、さまざまなデバイスでウェブサイトが動作できるようにすることを奨励しています。 できます。以前のウェブ言語とは異なり、HTML5 ではよりシンプルな <DOCTYPE> が使用されており、 charset 宣言: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. ビューポートのメタデータを使用して、ウェブページのサイズを適切に変更する。ドキュメント内 <head>: ブラウザのビューポートの設定方法を指定するメタデータを指定します ウェブページを表示しますたとえば、ビューポートのメタデータで、 ブラウザのビューポート、最初のページ スケール、ターゲット画面密度です。

    次の例は、ビューポートのメタデータを設定する方法を示しています。

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

    Android デバイスでビューポートのメタデータを使用する方法について詳しくは、ウェブアプリでさまざまな画面をサポートするをご覧ください。

  4. 垂直線形レイアウトを使用します。ユーザーが操作中に左右にスクロールする必要を ページを移動します上下にスクロールするとユーザーにとって使いやすく、ページがシンプルになります。
  5. レイアウトの高さと幅を match_parent に設定する。設定 WebView オブジェクトの高さと幅を match_parent を使用すると、アプリのビューのサイズが正しく調整されます。スペースの 高さを wrap_content に設定しています。これはサイズが正しくないためです。同様に レイアウトの幅を wrap_content にすることはサポートされていないため、WebView が 代わりに親の幅を使用しますこの動作から、これらの Pod に WebView オブジェクトの親レイアウト オブジェクトの高さと幅が以下に設定されています wrap_content。
  6. 複数のファイル リクエストを避ける。モバイル デバイスは通常、通信速度が速いため、 パソコンよりも遅い場合、ページの読み込み速度をできるだけ速くします。スピードを上げる一つの方法は、 スタイルシートやスクリプト ファイルなどの余分なファイルを <head> で読み込まないようにしてください。 また モバイル分析を Google の PageSpeed Insights をご覧ください。

参考情報