设备像素比(devicePixelRatio)(转)

设备像素比(devicePixelRatio)(转)

原文地址:http://www.web-tinker.com/article/20590.html

  设备像素比是物理像素与设备无关像素的比值,单位可以用dppx。它用于描述整个渲染环境在硬件设备上的缩放程度。在程序中可以通过window对象上的devicePixelRatio属性来得到这个值。它是只读的,但不是常量,对浏览器的一些特殊操作会改变这个值。
  首先是对几个概念的解释
  物理像素(physical pixel):设备能控制显示的最小单位。
  设备独立像素(DIP,device-independent pixel,density-independent pixel):独立于设备的用于逻辑上衡量像素的单位。
  每英寸像素量(PPI,pixels per inch):一英寸长度上可以并排的像素数量。
  正常人眼可以识别的分辨率为300PPI,而现在很多设备的分辨率都超过了300PPI。如果设备总是以满分辨率来显示东西就可能造成文字太小,人们看不清。因此像浏览器这样的软件就会对内容做一次放大后再进行渲染,也就是降低分辨率。要降低分辨率就需要让像素这个单位变大,因此PPI的计算不再使用物理像素,而改用设备独立像素。那么设备独立像素和物理像素之间就存在一个比例差异,这就是设备像素比。
  单位dppx(dots per pixel)表示每个DIP占用几个物理像素。或者说,CSS中的单位px在屏幕上占用了多少物理像素。在PC上,这个值通常为1。但浏览器提供了缩放功能,它实际上就是修改设备像素比来实现的,所以调整浏览器的缩放可以看到devicePixelRatio属性的变化。

  这个属性更多时候用于移动设备上,作为物理分辨率的判断依据。

时间: 2024-10-27 18:01:31

设备像素比(devicePixelRatio)(转)的相关文章

设备像素比(devicePixelRatio)

前言 设备像素比(devicePixelRatio):设备物理像素与设备独立像素的比值.可以通过window.devicePixelRadio来获取. 设备物理像素:设备能显示的最小单位. 设备独立像素:独立于设备的用于逻辑上衡量像素的单位. 如果设备总是以物理像素来显示内容,可能导致内容太小而看不清.浏览器就会对内容做一次放大后再渲染.这个放大比例就是设备像素比. 当我们进行浏览器缩放时,其实就是在改变浏览器的设备像素比. PPI 在显示设备中,PPI(pixel per inch)单位英寸的

设备像素比devicePixelRatio简单介绍

本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. 本文内容大部分属于翻译性质内容,因此,会不那么通俗易懂.不过,你是做手机开发的,或是有意向的,本文的内容如果细细读来,还是有些收获的. 一.定义 定义如下: window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips

webapp meta和设备像素比devicePixelRatio

webapp meta <!-- 启用360浏览器的极速模式(webkit) – --><meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对手持设备优化,主要是针对一些老的不识别viewpor

设备像素比dpr介绍

首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例. 公式表示就是:window.devicePixelRatio = 物理像素 / dips 好了,到了这里有出来了两个概念,物理像素 和  dips 物理像素,比较好理解,一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调

0520日重点: CSS像素,设备像素以及dpr

1.设备像素(device independent pixels): 设备屏幕的物理像素,任何设备的物理像素的数量都是固定的 2.CSS像素(CSS pixels): 又称为逻辑像素,是为web开发者创造的,在CSS和javascript中使用的一个抽象的层 3.设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值 实际上,此时的CSS像素对应着以后要提到的理想视口,其对应的javascript属性是screen.width/screen.

移动WEB开发--CSS像素、设备独立像素、设备像素之间关系

CSS像素.设备独立像素.设备像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢? 概念 CSS像素(CSS Pixel):适用于web编程,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概念,实际并不存在 设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素 设备像素(Device Pixel):物理像素,设备能控制显示的最小单

ViewPort,逻辑像素/设备独立像素,物理像素/设备独立像素,分辨率,CSS像素,设备像素比DPR,像素密度PPI。

一.相关基础知识 小米note参数查看:http://www.mi.com/minote/specs/ 以下都以小米note这个设备为例. 1.一般说手机的几寸是指:手机显示屏对角线的长度.1英寸2.54厘米.小米note为5.7英寸,约为14.478厘米. 2.物理像素/设备像素/像素:以一个很不严谨的方式去通俗的解释:这个屏幕是5英寸的,先把竖着等距画1919条线,这样横着看会有1920列,同理再横着画1079条线,竖着看会有1080行,这个过程中横线和竖线会相交,于是产生了一个个格子,这个

响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)

以下是我摘抄并翻译的,想了解更多原文在尾部有链接哈~ -webkit-min-device-pixel-ratio的常见值对比(是设备上物理像素和设备独立像素,设备像素比率) 设备 分辨率 设备像素比率Android LDPI 320×240 0.75 Iphone 3 & Android MDPI 320×480 1 Android HDPI 480×800 1.5 Iphone 4 960×640 2.0 设备像素为:1.0    (-webkit-min-device-pixel-rati

响应式设计:理解设备像素,CSS像素和屏幕分辨率

概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计 在响应式设计中,使用了viewport,device-width,media