IT工程師數位筆記本

　　注：本文是學習筆記，并不是教程，所以會有很多我不理解或猜測的問題，也會有不盡詳實之處，望見諒。

　　對于pc端網頁設計師來說，移動端的網頁制作，我之前只是簡單的加了一個

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

　　然后再根據實際預覽效果，對一些比例或者清晰度問題進行調整，以達到最佳效果。當然，這可以說只是為了應付工作。

　　最近工作告一段落，就有想法系統學習一下移動端網頁。因為已經有一定基礎，所以最快的學習方法，無異于肢解一個現成的移動端網站。

　　而淘寶網觸屏版應該會是個不錯的選擇！

　　本學習筆記都是xh本人根據網絡資料和自身理解寫成，如有不對之處，請在評論處指出，我會及時修改，多謝。

　　以上（都是廢話）。

　　所謂肢解，必須是一行行解剖學習下去！

　　所以，我在第二行便遇到了一個知識點：dpr。

　　dpr：設備像素比(devicePixelRatio)。

　　其定義：

　　　　window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。

　　　　公式表示就是：window.devicePixelRatio = 物理像素 / dips

　　具體詳細介紹資料：

　　　　鑫空間的博文（2012年）：http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

　　JS調用方法：

<script>
    var dpr=window.devicePixelRatio;
    alert(dpr);
</script>

　　淘寶網觸屏版的應用：

　　　　一、用chorme調試的結果：

　　　　　　（1）apple iphone 5 ：　　　　　

　　　　　　（2）apple iphone 6 plus ：

　　　　　　（3）google Nexus 4 ：

　　　　二、分析：

　　　　　　一開始接觸移動端的時候，我就已經學習到viewport是規定屏幕縮放比例的。

　　　　　　那根據以上截圖，可以得出，淘寶網觸屏版是根據不同的dpr來設置font-size和viewport。

　　　　　　這其實有點難理解。因為我之前的從未用過dpr，viewport也一直設為1，font-size也都是按pc端的經驗在12到20之間徘徊。

　　　　　　這里只能暫時理解為：淘寶為了根據不同設備的dpr使當前清晰度達到最高，而做的適配。　

　　　　　　html和body里都有font-size。但是網頁的font-size顯然是根據內層的body的設置。

　　　　　　觀察發現，其規律是 dpr:font-size=1:12 ；

　　　　　　按照此規律的設置具體會有什么利弊，還有待挖掘，不過淘寶用了，必然有其過人之處吧=，=

　　　　　　而設置height和data-spm的用處不是本文內容，以后再研究吧~　　　　　　

　　　　End、小小的宣傳：

　　　　　　模板世界（www.templatesy.com），分享、下載最新最全的網站模板。

2015.4.10更新：

　　前面說的淘寶觸屏版根據dpr設置font-size，顯然我太單純了，在head里，淘寶還加了n多的樣式，應該都是根據不同dpr調整的。見下圖