標籤：android webview webapps 規則 最佳化
上一篇我們學習了( [WebView學習之五]:調試Web Apps),今天我們來繼續學習。
(部落格地址:http://blog.csdn.net/developer_jiangqq),轉載請註明。
Author:hmjiangqq
Email:[email protected]
為行動裝置開發Web頁面以及Web應用程式(Application)和開發傳統的案頭Web瀏覽器相比存在一些不同的地方以及痛點。為了協助你更好的開發以及為行動裝置開發出更加有效Web應用程式，以下講到的開發實踐規則將會非常有用:
(一):行動裝置訪問重新導向訪問專門為Web網站定製的Web頁面
在使用伺服器端重新導向時有好幾種方式進行重新導向請求行動裝置版本的網站。大多數情況下，我們可以通過伺服器"嗅探"出Web瀏覽器的使用者代理程式資訊，來決定是否需要移動版本的網站。你可以簡單的的查詢是否存在"mobile"這個使用者代理程式資訊，這種方式可以適合於大部分的行動裝置。如果又必要你可以定義一個特殊的使用者代理程式資訊(例如:"Android2.1")。
[注]:大尺寸的Android裝置需要提供全尺寸的網站(例如:平板電腦)，因為裝置不包含"mobile"這類的使用者代理程式資訊。除此之外其他的Android裝置基本都差不多有相同的使用者代理程式資訊。因為選擇移動版本網站是以裝置是否存在"mobile"這樣的使用者代理程式資訊來決定的。
(二):網頁的HTML代碼是需要使用專門適合行動裝置的標籤DOCTYPE
最常用的移動建站的標記語言是以XHTML為基礎的。這種標準可以確保網站在行動裝置上面可以顯示的效果最佳。例如:該不允許HTML Frames或者巢狀表格結構。一旦使用DOCTYPE標籤，就要確定網頁代碼文檔使用特殊的字元編碼(例如:UTF-8)。如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
同時需要確定網頁標籤中的DOCTYPE的聲明是有效，你可以通過下面的網站進行驗證:http://validator.w3.org.
(三):正確使用viewport meta資料來調試Web頁面，達到最佳顯示效果
在代碼文檔的<head>標籤中，你可以定義寫meta標籤屬性來指定Web瀏覽器表單如何渲染網頁。例如:你可以設定瀏覽器表單的高和寬度，頁面初始縮放大小甚至是目標螢幕密度
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
更多關於viewportmeta的屬性設定可以查看:[WebView學習之二]:使用Web Apps 支援不同解析度屏
(四):避免多檔案請求
一般行動裝置的網路連接速度低於PC電腦,所以你需要儘可能提高網頁載入速度。一個方法是盡量避免載入<head>標籤中的CSS樣式表以及Javascript指令檔。相反的你可以在<head>中寫CSS樣式以及Javascript指令碼代碼(或者在<body>結尾寫入網站載入過程不需要使用的指令碼代碼。)。另外你也可以使用例如:Minify這樣的壓縮公用程式來最佳化檔案的大小以及提高載入速度。
(四):使用垂直線性布局
避免使用者在瀏覽網頁的時候左右介面同時滾動，上下線性滾動更加可以提高使用者體驗，並且簡化Web頁面。
後面的文章一系列知識點，會專門封裝一個WebView組件，這樣用起來更加方便點,敬請期待…
[WebView學習之六]:Web Apps最佳實務規則
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
