淘宝网触屏版 - 学习笔记(0 - 关于dpr)

时间:2023-12-15 22:25:56

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

  对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个

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

  然后再根据实际预览效果,对一些比例或者清晰度问题进行调整,以达到最佳效果。当然,这可以说只是为了应付工作。

  

  最近工作告一段落,就有想法系统学习一下移动端网页。因为已经有一定基础,所以最快的学习方法,无异于肢解一个现成的移动端网站。

  而淘宝网触屏版应该会是个不错的选择!

  本学习笔记都是xh本人根据网络资料和自身理解写成,如有不对之处,请在评论处指出,我会及时修改,多谢。

  以上(都是废话)。

  所谓肢解,必须是一行行解剖学习下去!

  

  淘宝网触屏版 - 学习笔记(0 - 关于dpr)

  所以,我在第二行便遇到了一个知识点: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 :     

        淘宝网触屏版 - 学习笔记(0 - 关于dpr)

        淘宝网触屏版 - 学习笔记(0 - 关于dpr)

        淘宝网触屏版 - 学习笔记(0 - 关于dpr)

      (2)apple iphone 6 plus :

          淘宝网触屏版 - 学习笔记(0 - 关于dpr)

        淘宝网触屏版 - 学习笔记(0 - 关于dpr)

        淘宝网触屏版 - 学习笔记(0 - 关于dpr)

      (3)google Nexus 4 :

        淘宝网触屏版 - 学习笔记(0 - 关于dpr)

        淘宝网触屏版 - 学习笔记(0 - 关于dpr)

        淘宝网触屏版 - 学习笔记(0 - 关于dpr)

    二、分析:

      一开始接触移动端的时候,我就已经学习到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调整的。见下图

  淘宝网触屏版 - 学习笔记(0 - 关于dpr)