網頁應用程式最佳做法
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
開發適用於行動裝置的網頁和應用程式會面臨不同的挑戰
開發適用於電腦版網路瀏覽器的網頁。下列做法可協助您
最適合 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,針對您的應用程式提供詳細的最佳化建議。
其他資源
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2024-08-23 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-08-23 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-08-23 (世界標準時間)。"]]