網頁應用程式最佳做法

開發適用於行動裝置的網頁和應用程式會面臨不同的挑戰 開發適用於電腦版網路瀏覽器的網頁。下列做法可協助您 最適合 Android 和其他行動裝置的網頁應用程式。

  1. 將行動裝置重新導向至專屬行動版網站。以下提供 方法。常見的方法是「抽鼻子」這個 網路瀏覽器提供的使用者代理程式字串。為了判斷 判斷是否要提供行動版網站字串中。
  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 改用其父項寬度基於這個行為，您也必須確認沒有任何要求 WebView 物件的上層版面配置物件的高度和寬度已設為 wrap_content。
  6. 避免提出多個檔案請求。因為行動裝置通常具有網路連線速度 比桌上型電腦慢，請盡可能加快網頁載入的速度。加速更新的方法之一是 避免在 <head> 中載入額外的檔案，例如樣式表和指令碼檔案。 此外，請考慮 進行行動裝置分析 Google 的 PageSpeed Insights，針對您的應用程式提供詳細的最佳化建議。

其他資源