注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

设备像素比(devicePixelRatio)  

2015-03-07 09:45:52|  分类: 相关技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  首先来谈谈设备像素比这个概念,假如现在一个div样式设置宽度为200px,那得用多个物理像素才能显示出来?如果设备像素比为2的话,就得用400px物理像素才能显示出CSS值为200px的div;像素比为1的话,不就是得用200px物理像素。这样得出一个小结论:设备像素比 = 物理像素 / 设备独立像素,换句话说 设备像素比 = 物理像素 /  CSS设置的像素值。在程序中可以通过window对象上的devicePixelRatio属性来得到这个值。它是只读的,但不是常量,对浏览器的一些特殊操作会改变这个值。欢迎学习交流——梦幻雪冰
  下面是对几个概念进行解释:
  物理像素(physical pixel):设备能控制显示的最小单位(设备中的像素,不可以改变的值)。
  设备独立像素(DIP,device-independent pixel,density-independent pixel):独立于设备的用于逻辑上衡量像素的单位(不是固定的,可以改变)。
  每英寸像素量(PPI,pixels per inch):一英寸长度上可以并排的像素数量。欢迎学习交流——梦幻雪冰
  正常人眼可以识别的分辨率为300PPI,而现在很多设备的分辨率都超过了300PPI。如果设备总是以满分辨率来显示东西就可能造成文字太小,人们看不清。因此像浏览器这样的软件就会对内容做一次放大后再进行渲染,也就是降低分辨率。要降低分辨率就需要让像素这个单位变大,因此PPI的计算不再使用物理像素,而改用设备独立像素。那么设备独立像素和物理像素之间就存在一个比例差异,这就是设备像素比
  设备像素比的单位dppx(dots per pixel)表示每个DIP(DIP就是CSS设置的值)占用几个物理像素。或者说,CSS中的单位px在屏幕上占用了多少物理像素。在PC上,这个值通常为1。但浏览器提供了缩放功能,它实际上就是修改设备像素比来实现的,所以调整浏览器的缩放可以看到devicePixelRatio属性的变化。 

资料(给出了iPhone屏幕的物理像素与设备独立像素的关系):
设备像素比(devicePixelRatio) - 梦幻雪冰 - 梦幻雪冰
 

欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
设备像素比(devicePixelRatio) - 梦幻雪冰 - 梦幻雪冰
 
  评论这张
 
阅读(527)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017