设备像素比(devicePixelRatio)

前言

  设备像素比(devicePixelRatio):设备物理像素与设备独立像素的比值。可以通过window.devicePixelRadio来获取。

  设备物理像素:设备能显示的最小单位。

  设备独立像素:独立于设备的用于逻辑上衡量像素的单位。

  如果设备总是以物理像素来显示内容,可能导致内容太小而看不清。浏览器就会对内容做一次放大后再渲染。这个放大比例就是设备像素比。

  当我们进行浏览器缩放时,其实就是在改变浏览器的设备像素比。

PPI

在显示设备中,PPI(pixel per inch)单位英寸的像素数,代表屏幕的像素密度。

当PPI越高时在同一尺寸的屏幕上能显示更多的像素,也能够展现更多的画面细节。

PPI的计算:屏幕的物理像素除以物理尺寸。

PPI过高的问题:相同的图片素材,在越高的设备上会显示得越小(PPI提高一倍,图片在设备中显示小了4倍):

CSS像素

前端开发时,用来控制元素样式的单位像素,称为CSS像素。

浏览器默认情况下,CSS像素和屏幕像素1:1:

当页面放大时,CSS像素被拉伸,1个CSS像素大于1个屏幕像素:

时间: 2024-11-09 12:29:28

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

设备像素比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

设备像素比(devicePixelRatio)(转)

设备像素比(devicePixelRatio)(转) 原文地址:http://www.web-tinker.com/article/20590.html 设备像素比是物理像素与设备无关像素的比值,单位可以用dppx.它用于描述整个渲染环境在硬件设备上的缩放程度.在程序中可以通过window对象上的devicePixelRatio属性来得到这个值.它是只读的,但不是常量,对浏览器的一些特殊操作会改变这个值. 首先是对几个概念的解释 物理像素(physical pixel):设备能控制显示的最小单位

设备像素比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