開發適用於行動裝置的網頁和應用程式會面臨不同的挑戰 開發適用於電腦版網路瀏覽器的網頁。下列做法可協助您 最適合 Android 和其他行動裝置的網頁應用程式。
- 將行動裝置重新導向至專屬行動版網站。以下提供 方法。常見的方法是「抽鼻子」這個 網路瀏覽器提供的使用者代理程式字串。為了判斷 判斷是否要提供行動版網站字串中。
- 使用 HTML5
行動裝置使用者HTML5 是行動網站最常用的標記語言。
這項標準有助於我們以行動裝置為優先的開發工作,確保網站能在多種不同管道上運作
裝置。與先前的網頁語言不同,HTML5 使用更簡單的
<DOCTYPE>
和charset
宣告:<!DOCTYPE html> ... <meta charset="UTF-8">
- 使用可視區域中繼資料,適當調整網頁大小。在你的文件中
<head>
,提供中繼資料,指定瀏覽器可視區域所需的 轉譯網頁舉例來說,您可以讓可視區域中繼資料指定 初始頁面縮放比例和目標螢幕密度。以下範例說明如何設定可視區域中繼資料:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
如要進一步瞭解如何在 Android 裝置使用可視區域中繼資料,請參閱「在網頁應用程式中支援不同螢幕」。
- 使用垂直線性版面配置。避免使用者在時限內左右捲動 瀏覽網頁。上下捲動不僅方便使用者瀏覽,還能讓網頁更簡潔。
- 將版面配置高度和寬度設為
match_parent
。設定WebView
物件的高度和寬度match_parent
會確保應用程式的檢視畫面大小正確。我們不建議將 高度設為wrap_content
,否則會導致大小不正確。同樣地,將 系統不支援將版面配置寬度設為wrap_content
,導致WebView
改用其父項寬度基於這個行為,您也必須確認沒有任何要求WebView
物件的上層版面配置物件的高度和寬度已設為wrap_content
。 - 避免提出多個檔案請求。因為行動裝置通常具有網路連線速度
比桌上型電腦慢,請盡可能加快網頁載入的速度。加速更新的方法之一是
避免在
<head>
中載入額外的檔案,例如樣式表和指令碼檔案。 此外,請考慮 進行行動裝置分析 Google 的 PageSpeed Insights,針對您的應用程式提供詳細的最佳化建議。