標籤：
轉自 http://my.oschina.net/cart/blog/282477
做前端開發不短了，用過jQuery Mobile jqMobi 也純手工寫過。。
最後總結如下：
jQuery Mobile：適合大而全，相容性高，功能全，但是檔案大，略顯臃腫。。如果你是網頁版、手機版共用jquery庫等 適合使用jQuery Mobile。
jqMobi：適合單獨就是手機版的站，體積小，速度快，但是相容性沒有jQuery Mobile好，功能沒有jQuery Mobile全，但是一般也夠用啦。
不過，如果你是簡單的小功能手機版的話，殺雞焉用牛刀啊，自己手寫即可。
手機版網站要注意，結構形如：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" name="viewport" /><link rel="dns-prefetch" href="//baidu.com"/><title>======</title></head><body></body></html>手機版 一定要帶上
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" name="viewport" />其中如果你網站需要多個次層網域CDN，精選以下代碼：
<link rel="dns-prefetch" href="//baidu.com"/>使用了瀏覽器DNS預讀功能，大大加速你網站DNS解析的速度，強烈推薦使用。
網站開發使用像素，還是百分比？使用像素設計網站：網站開發使用像素優點
一般手機版以320PX來設計你的手機版即可，使用像素有個好處就是在任何裝置上，表現出來的效果更能保持你設計出來的原汁原味，不會出現“意外”效果。
網站開發使用像素缺點多種裝置不能夠智能自適應。
使用百分比設計網站：網站開發使用百分比優點不同裝置可以自適應，基本都很漂亮
網站開發使用百分比缺點不同裝置，萬一有一種裝置的寬度不是你預料的，自適應等會“意外”的掉下來，不美觀，開發、測試難度略大。
最後，做個總結：
| <meta name="viewport" |
| content=" |
| height = [pixel_value | device-height] , |
| width = [pixel_value | device-width ] , |
| initial-scale = float_value , |
| minimum-scale = float_value , |
| maximum-scale = float_value , |
| user-scalable = [yes | no] , |
| target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] |
| " |
| /> |
width
控制 viewport 的大小，可以指定的一個值或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height
和 width 相對應，指定高度。
target-densitydpi
一個螢幕像素密度是由螢幕解析度決定的，通常定義為每英寸點的數量（dpi）。Android支援三種螢幕像素密度：低像素密度，中像素密度，高像素密 度。一個低像素密度的螢幕每英寸上的像素點更少，而一個高像素密度的螢幕每英寸上的像素點更多。Android Browser和WebView預設螢幕為中像素密度。
下面是 target-densitydpi 屬性的 取值範圍
| <!-- html document --> |
| <meta name="viewport" content="target-densitydpi=device-dpi" /> |
| <meta name="viewport" content="target-densitydpi=high-dpi" /> |
| <meta name="viewport" content="target-densitydpi=medium-dpi" /> |
| <meta name="viewport" content="target-densitydpi=low-dpi" /> |
| <meta name="viewport" content="target-densitydpi=200" /> |
為了防止Android Browser和WebView 根據不同螢幕的像素密度對你的頁面進行縮放，你可以將viewport的target-densitydpi 設定為 device-dpi。當你這麼做了，頁面將不會縮放。相反，頁面會根據當前螢幕的像素密度進行展示。在這種情形下，你還需要將viewport的 width定義為與裝置的width匹配，這樣你的頁面就可以和螢幕相適應。
initial-scale
初始縮放。即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，如果你設定初始縮放為“1.0”，那麼，web頁面在展現的時候就會以target density解析度的1:1來展現。如果你設定為“2.0”，那麼這個頁面就會放大為2倍。
maximum-scale
最大縮放。即允許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與螢幕大小相比的最大乘數。例如，如果你將這個值設定為“2.0”，那麼這個頁面與target size相比，最多能放大2倍。
user-scalable
使用者調整縮放。即使用者是否能改變頁面縮放程度。如果設定為yes則是允許使用者對其進行改變，反之為no。預設值是yes。如果你將其設定為no，那麼minimum-scale 和 maximum-scale都將被忽略，因為根本不可能縮放。
所有的縮放值都必須在0.01–10的範圍之內。
例：
手機版WEB開發經驗分享,手機版網站開發注意事項,網站自適應,手機版網站自適應,移動安卓APP自適應
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
