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

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

  

淘宝网触屏版 - 学习笔记(0 - 关于dpr)的更多相关文章

  1. 淘宝网触屏版 - 学习笔记(1 - 关于meta)

    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. <meta charset="utf-8"> <meta cont ...

  2. WebApp触屏版网站开发要点

    所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上 ...

  3. Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性

    简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...

  4. 淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习

    淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <t ...

  5. 【原】Learning Spark (Python版) 学习笔记(三)----工作原理、调优与Spark SQL

    周末的任务是更新Learning Spark系列第三篇,以为自己写不完了,但为了改正拖延症,还是得完成给自己定的任务啊 = =.这三章主要讲Spark的运行过程(本地+集群),性能调优以及Spark ...

  6. 离屏渲染学习笔记 /iOS圆角性能问题

    离屏渲染学习笔记 一.概念理解 OpenGL中,GPU屏幕渲染有以下两种方式: On-Screen Rendering 意为当前屏幕渲染,指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行. O ...

  7. 【Head-First设计模式】C#版-学习笔记-开篇及文章目录

    原文地址:[Head-First设计模式]C#版-学习笔记-开篇及文章目录 最近一年断断续续的在看技术书,但是回想看的内容,就忘了书上讲的是什么东西了,为了记住那些看过的东西,最好的办法就是敲代码验证 ...

  8. 解决电脑访问Discuz!手机版(支持触屏版)

    discuz电脑访问手机版的方法现在需要来修改一下2个文件,即可用电脑浏览discuz的手机版本:找到./source/function/function_core.php 文件,查找 : funct ...

  9. 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

随机推荐

  1. DNS压力测试工具dnsperf简介

    dnsperf是我最近写的一个开源的DNS压力测试工具,用户可以用它来对DNS服务器或者Local DNS做压力测试.dnsperf目前的实现是单进程模式,通过epoll非阻塞地处理网络事件. dns ...

  2. ferret32位安装

    首先在网上找到解决方案: 1.添加对32位的支持 dpkg --add-architecture i386 2.更新 apt-get clean && apt-get update & ...

  3. hdu 1556

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. JS 数组迭代方法

    var arr = [3,4,5,6,7,"a"]; var isNum = function(elem,index,AAA){return !isNaN(elem);} var ...

  5. (一)GPIO 编程实验 LED 流水灯控制

    7个寄存器 是R1-R16.(当然,里面有很多是分几个模式的,所以总共有37个)类似于单片机的R0-R7. GPXCON,GPXDAT等等是另外的寄存器,应该叫,特殊功能寄存器,类似于单片机的P0,P ...

  6. 浅谈在静态页面上使用动态参数,会造成spider多次和重复抓取的解决方案

    原因: 早期由于搜索引擎蜘蛛的不完善,蜘蛛在爬行动态的url的时候很容易由于网站程序的不合理等原因造成蜘蛛迷路死循环. 所以蜘蛛为了避免之前现象就不读取动态的url,特别是带?的url 解决方案: 1 ...

  7. paper 119:[转]图像处理中不适定问题-图像建模与反问题处理

    图像处理中不适定问题 作者:肖亮博士 发布时间:09-10-25 图像处理中不适定问题(ill posed problem)或称为反问题(inverse Problem)的研究从20世纪末成为国际上的 ...

  8. tomcat 默认目录修改

    引用:http://andrewyu.blog.51cto.com/1604432/544659 Tomcat7跟以前的版本一样,默认的发布程序是/usr/local/tomcat/webapps/R ...

  9. 关于ibatis中mysql的@变量问题作用域、污染问题

    搞了1天,过程不想多说,结论如下: ibatis.net 是有连接池的,用ab.exe 并发测试,可以测出默认的max连接数 ibatis.net的数据操作 xml 中可以用@变量,也就是 Sessi ...

  10. javascript之聊天室(单机)来自于冷的锋刃

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...