做网站漯河,诸暨建设局网站,世界建筑网,天元建设集团招聘官网内容转自 http://www.cnblogs.com/koukouyifan/p/4066567.html
非常感谢 口口一凡 为我们提供的这篇文章#xff0c;受益匪浅#xff0c;特地转到自己的博客收藏起来。
以下是原文内容。
进行移动web开发已经有一年多的时间了#xff0c;期间遇到了一些令人很困惑的东西。…内容转自 http://www.cnblogs.com/koukouyifan/p/4066567.html
非常感谢 口口一凡 为我们提供的这篇文章受益匪浅特地转到自己的博客收藏起来。
以下是原文内容。
进行移动web开发已经有一年多的时间了期间遇到了一些令人很困惑的东西。比如
我们经常使用的meta nameviewport contentwidthdevice-width, initial-scale1.0, minimum-scale1.0, maximum-scale1.0, user-scalableno里的viewport究竟是什么意思这里的device-width跟我们用JS获取到的屏宽的区别与联系分别是什么为什么去掉meta /标签后页面会变得很小很小为什么很多分辨率很大的屏幕宽度其实并不大屏幕分辨率与用JS获取到的屏宽的区别与联系分别又是什么
等等这些关于“像素”、关于“宽度”的一系列问题。
最近我翻了很多资料查找关于“宽度”和“像素”的东西总算感觉自己算是有点开窍了这里把我的一些理解分享出来请求大家的批评与指正。当然文章里也有引用其他文章里的句子。文章最后会把参考的一些文章链接贴出来供大家参考
CSS pixel与device pixels (css px与device px)
首先了解下什么是CSS pixels/ pɪks(ə)l; -sel /什么是device pixels
1 CSS pixels可以理解为css像素是浏览器使用的抽象单位主要用来在网页上绘制内容。也可以说css px是专门为web开发者提出的一个抽象概念也只跟我们平时写的css样式有关与分辨率比如720px*1280px里的px没关系。
2 device pixels可以理解为是设备像素官方的解释是显示屏幕的最小物理单位每个dp包含自己的颜色、高宽等。
对于我们做web开发的人来说我们用到的最多的地方是“css像素”即类似width:300px;font-size:14px;这类的css语句里用到的。它跟设备自身的px是没关系的。也就是说1个CSS 像素占多少个物理像素是不确定的这个问题通过页面的放缩比较容易理解。比如一个普通的html页面上有一个300px的元素如果我们放大页面元素会占据更多的设备像素即device pixels但它的CSS pixels不变依然是300px缩小页面也是同样的道理占据了更少的device pixels但它的CSS pixels不变。也就是说元素占据了多少device pixels是由当前页面的放缩比例而定的。
不过页面的缩放对我们web开发来说是好像没有任何意义的。但有一个问题我们开发出来的页面是想要在各个屏幕个以最佳的样式展示出来的我们不能让页面里存在不能控制的元素。所以就出现了它meta nameviewport contentwidthdevice-width, initial-scale1.0, minimum-scale1.0, maximum-scale1.0 / 也就是我们在进行web开发的时候经常用到的viewport。那么viewport到底是个什么玩意儿呢而且content里面width为什么要等于device-width呢device-width又是个什么概念呢下面我们来看看它们哥俩儿是什么。
Viewport 与 device-width
在解释这两个概念之前先说一个大家都知道但不明白为什么的情况把一个普通的在PC上开发的HTML页面直接放手机上你会发现不管多大的页面都可以在小小的手机屏幕上显示但是图文都会显示的特别小如果你用JAVASCRIPT获取下页面宽度你会发现大多数的页面宽度都是980px的这个就跟viewport有关。
Viewport起源于苹果但现在已经被大多数浏览器支持。关于viewport有两个概念visual viewport跟layout viewport。这里visual viewport也就是视觉上的窗口可以理解为设备自己的宽度。这时如果你有一个长960的页面有一个元素是20%实际解析出来就是192px。但如果我用宽为320px的屏幕打开呢这个元素就成了64px但是这个时候我设置的字体大小是12px在320px的屏幕上就只能显示64/12个字了
鉴于这个问题苹果找到一种解决方法在移动版的safari中定义了viewport meta标签它的作用就是创建一个虚拟的窗口viewport这个虚拟的窗口就是layout viewport分辨率接近桌面显示器apple将其定位为980px。在手机上可以通过document.documentElement.clientWidth来获取。
其他浏览器厂商也有不同的解决办法例如UCweb是使用的中间技术。
另外据说不同浏览器厂商对于layout viewport的大小都有自己的定义。但是我用手上不多的几个手机小米2s、SONY、金立、ipad测试的结果都是980px。其中在小米2s上测试了小米自带浏览器、QQ浏览器、UC浏览器、谷歌浏览器还有opera浏览器结果都一样其他的手机上面不管装了什么浏览器都测试了结果都是980px。但是这个值对于我们web开发来说好像也没有什么用处。
因为大多数情况下meta nameviewport contentwidthdevice-width / 这个标签对我们来说是最给力的可以让我们的页面里的图文显示的是正常的很大程度上提高了页面的可读性。而这一meta标签的功能就是设置layout viewport为device-width的宽度。但是device-width具体是什么呢
第一代iphone的时候分辨率为320*480屏幕尺寸为3.5寸注意这个3.5寸说的是屏幕的对角线宽这时候device-width就是320px也是手机的分辨率宽此时device-width就是设备宽。但第二代的iphone分辨率提高为了480*960屏幕尺寸为依然为3.5寸如果device-width还是设备宽那么同样是320px的页面放480*960的手机屏上图文就会变得比较小又会影响其可读性。因此iphone的device-width一直维持在320pxipad一直维持在1024px。这个时候device-width就不是设备宽了也就不是分辨率的宽了是一个中间层。Android采用的也是这一概念其device-width值以360居多但也不乏有像540px和600px这样的奇葩。在设置了meta /标签以后device-width值可以用window.innerWidth来获取device-width值。
有关DPI
dpi(Dots Per Inch)有时也叫做ppi(Point Per Inch)翻译过来也叫像素密度表示设备每英寸所占有的像素数数值越高即代表显示屏能够以越高的密度显示图像。注这里的像素指的是device pixels。DPI的计算公式 有意思的是这个值比苹果官网上公布的326还有高一点点。 其中PPI在120-160之间的手机被归为低密度手机160-240被归为中密度240-320被归为高密度320以上被归为超高密度Apple给了它一个上流的名字——retina。
这些密度对应着一个特定的缩放比例值拿我们最熟悉的iphone4或4s来说它们的PPI是326属于超高密度的手机。当我们书写一个宽度为320px的页面放到iphone中显示你会发现它竟然是满宽的。这是因为页面被默认放大了两倍也就是640px而iphone4或4s的宽正是640px。
DevicePixelRadio
DevicePixelRadio定义window.devicePixelRatio是设备上物理像素也就是device-width和设备独立像素device-independent pixels即dips的比例。公式表示就是window.devicePixelRatio 物理像素/dips
Android 和 iPhone 中都有一个占整个屏幕大小的换算单位Android 中叫 dip 或 dpiPhone 中叫 point。Dip就是device independent pixels设备独立像素。而设备的物理像素和 dip 的比例就是 devicePixelRatio此值可以通过 window.devicePixelRatio 属性获取。
据我查找到的一些资料显示这里的独立像素的值其实就是device-width值。这个值也就是我们平时在手机上布局用的宽度当然是在设置了meta /标签的前提下。
这里为什么提到devicePixelRatio这个概念呢
因为当devicePixelRatio1.5的时候也就是说当屏幕分辨率宽与device-width的比值为1.5时某些手机自带的浏览器特别是三星手机出现在最多会出现1px的线解析成2px的bug但是经测试同一部手机上安装的UC浏览器一般不会有这个bug。关于这个bug网上有一篇文章做了比较好的解释
https://www.imququ.com/post/devicepixelratio-and-border-width.html 注文章很多知识引用了《移动webapp开发必备知识》和《什么是viewport为啥需要viewport》链接分别是
http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html
http://www.myexception.cn/mobile/428756.html
还有这篇: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
