網頁應用程式最佳做法

開發適用於行動裝置的網頁和應用程式,與為電腦版網路瀏覽器開發網頁相比,面臨截然不同的挑戰。下列做法可協助您提供效果最佳的 Android 和其他行動裝置網頁應用程式。

  1. 將行動裝置重新導向至專屬行動版網站。使用伺服器端重新導向的方法有很多種。其中一種常見的做法是「監控」網路瀏覽器提供的使用者代理程式字串。如要判斷是否提供行動版的網站,請在使用者代理程式中尋找「mobile」字串。
  2. 在行動裝置上使用 HTML5HTML5 是行動網站最常用的標記語言。這項標準鼓勵行動裝置優先的開發工作,有助於確保網站可在各種裝置上運作。與先前的網頁語言不同,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_parentWebView 物件的高度和寬度設為 match_parent,可確保應用程式的檢視畫面大小正確。我們不建議將高度設為 wrap_content,因為這會導致大小不正確。同樣地,系統不支援將版面配置寬度設為 wrap_content,導致 WebView 改用父項的寬度。基於此行為,您也必須確保 WebView 物件的父項版面配置物件高度和寬度皆未設為 wrap_content
  6. 避免提出多次檔案要求。由於行動裝置的連線速度通常比電腦慢,因此請盡量加快網頁載入速度。加快速度的其中一種方法是避免在 <head> 中載入其他檔案,例如樣式表和指令碼檔案。另外,您也可以使用 Google PageSpeed Insights 執行行動分析,取得應用程式專屬的詳細最佳化建議。

其他資源