Android官方文檔之Web Apps最佳實踐

爲移動設備開發web頁面或者web應用與爲桌面瀏覽器開發web頁面不同,會出現很多新的挑戰。爲了幫助你開始,下面是一系列你需要遵循的最佳實踐,以便爲Android和其他移動設備提供最有效的web應用。

  1. 1.  將來自移動設備的請求重定向到專門爲移動端設計的Web版本

有好幾種方式可以讓你使用服務端的重定向將請求重定向到你的web站點的移動版本上去。最常見的情況是通過“嗅探”("sniffing")web瀏覽器提供的用戶代理字符串(User Agent string)。爲了確定是否要提供一個你的站點的移動版本,你只需要在User Agent中尋找“mobile”字符串即可,它可以與很多移動設備匹配。如果需要的話,你還可以在用戶代理字符串中找到特定的操作系統(比如Android 2.1)。

注意:大屏幕的Android設備需要全尺寸的網站(比如平板電腦),因此在user agent中不包含“mobile”字符串,但它的user agent的其他部分基本是一樣的。由於這種情況的存在,你在發送你的站點的移動端頁面的時候,一定要確認user agent中是否包含“string”字符串。

  1. 2.  使用合適於移動設備的有效的DOCTYPE標記

爲移動站點設計的最常見的標記語言是 XHTML Basic。這一標準確保了特定的標記可以在移動設備上有最佳表現。例如,它不支持HTML框架或是嵌套表格,因爲這些在移動設備上表現都很糟。除了聲明DOCTYPE,還要聲明合適的字符編碼(比如UTF-8)。

例如:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

一定要確認你的web頁面的標記對於已經聲明的DOCTYPE來說是有效的。可以使用驗證器(validator),比如由http://validator.w3.org提供的一個。

  1. 3.  使用viewport 元數據來將頁面調整至合適大小

在你的文檔的<head>部分,你需要提供元數據來指定你希望如何在瀏覽器的viewport中呈現你的頁面。例如,你的viewport的元數據可以指定瀏覽器的viewport的高和寬,最初的web頁面規模甚至是目標屏幕分辨率(target screen density)。

例如:

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

想要獲取更多關於如何爲Android設備使用viewport元數據的信息,請閱讀Targeting Screens from Web Apps

  1. 4.  避免多文件請求

因爲移動設備通常比臺式機的聯網速度慢得多,因此你需要想辦法讓你的頁面儘快加載。一種加速加載方法是避免下載額外文件,比如<head>中的樣式表和腳本文件。相反,直接在<head>部分提供CSS或者Javascript即可(如果腳本是在頁面加載完以後纔用到,那麼將其包含在<body>的結束部分也可)。同樣,你還可以通過類似於Minify的工具來壓縮你的文件。

  1. 5.  使用一個垂直的線性佈局(Use a vertical linear layout)

在導航頁面的時候,要避免讓用戶左右拖動你的頁面。對於用戶來說,上下拖動更容易,也讓你的頁面更簡單。

要想知道更多關於如何創建偉大的移動web應用,請看W3C的移動設備最佳實踐。要看其他提升站點速度的建議(移動設備和桌面設備都適用),請看Yahoo!的最佳性能 指南以及Google在讓web 更快的加速教程。

 

原文鏈接:Best Practices for Web App


譯文來源:http://www.webapptrend.com/
 WebAppTrend是一個獨立的技術博客,關注Web App前瞻和實踐,以及智能瀏覽器發展 

請大家在關注CSDN的同時,關注我們的新浪微博 @WebAppTrend,關注我們的騰訊微博@WebAppTrend,qq羣見官方博客右側。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章