淘宝网触屏版 - 学习笔记（0 - 关于dpr）

　　注：本文是学习笔记，并不是教程，所以会有很多我不理解或猜测的问题，也会有不尽详实之处，望见谅。

　　对于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调整的。见下图