html5移動端頁面分辨率設置及相應字體大小設置的靠譜使用方式

 

對於html5移動端網頁編寫CSS網上有不少介紹的文章，但在實際使用過程當中仍是會糾結.

網上的資料太多，且大多都是技術介紹型，特別是針對android上，網上寫的各類麻煩，各類複雜，各類不接地氣兒...

我在作移動端網頁時，老是和美工設計的頁面有出入，主要仍是因爲雙方對移動端HTML5實現頁面還了解還不夠。 

 

今天就研究一下各大互聯網公司對於移動端頁面的處理方式。

• 主要研究對象：BAT(度娘，阿狸，企鵝)這幾家的移動端網站或webapp
• 主要研究點：viewport的設置，字體的設置，圖片原始寬高設置

汝甚吊，令尊知否？

---

 咦？target-densitydpi呢？

網上有老複雜的計算，針對不一樣的屏幕分辨率，經過公式計算出不一樣結果再用JS輸出到viewport上，各類云云， 我只想說：汝甚吊，令尊知否

 

google如今也已經不建議使用target-densitydpi這一屬性，webkit中已移除了，請看這裏

 

http://trac.webkit.org/changeset/119527

 

現代移動端網站的最佳實踐

---

 

 我看了BAT的移動端頁面中，如今是沒有target-densitydpi這個東西了。

最佳實踐：

一、在viewport中將width設置爲device-width, 如：

 

<meta name="viewport" content="width=device-width">

 

二、而且將網頁設計成自適應方式

先有再優纔是王道

---

 

CSS中關於分辨率寬度設置：

寬度能夠使用320px爲標準，圖片寬度能夠以640px爲標準。

這樣一方面兼容了低分辨率的低端機，一方面兼容了高分辨率的高端機，缺點是可能會浪費些流量，但開發效率上來說那是極好的，要保證。

 

字體單位設置

---

 

 

幾個網站中大概使用瞭如下幾個單位

 

Fontsize單位：px, em, %, rem

 

只有淘寶首頁使用了rem這個單位，果真是淘寶的UED比較喜歡嘗試新的東西，這個單位是CSS3中新加入的，結合了em與px的優勢，摒棄了em與px的(不易操控)缺點

 

關於字體單位詳細介紹能夠參考這片文章

http://www.w3cplus.com/css3/define-font-size-with-css3-rem

 

 

 

Viewport中的initial-scale值

---

 

 

除淘寶首頁的initial-scale設置了0.5，iphone4下至關於640寬度分辨率。

其它的initial-scale均是1.0的設置，即iphone4下320寬度的分辨率，包括淘寶內頁或則其內部的天貓，微淘等頻道或產品。

各移動端網站截圖說明

---

 

如下是各移動端網站頁面initial-scale值、字體、間距等

淘寶首頁

0.5縮放，因此它的邊距設置的是24px但實際視覺上看到的像素是12px

 

淘寶聚划算頻道

天貓

蘑菇街

騰訊QQ官方

QQ空間

百度首頁

百度音樂

 

結束語

---

 

我只是簡單的對BAT巨頭們的移動端網站，在chrome瀏覽器debug模擬器的查看了它們相應的HTML及CSS

對於移動端頁面佈局方面我應該也算是新手，新手上路... 你們多躲躲我,省得追尾了。

我水平有限，此文僅供參考，歡迎討論

========================================================

轉載處請註明：博客園(王二狗)willian12345@126.com