物理像素，设备独立像素，像素比

物理像素：又称设备像素，j简称pp，设备屏幕上实际有的像素点，如pc端常见分辨率1920 * 1080，意味着在屏幕水平方向上有1920个像素点，垂直方向上有1080个像素点。

屏幕尺寸：屏幕对角线的长度，如17英寸

屏幕像素密度（Pixels Per Inch）：简称ppi, 每英寸上的像素点。ppi越高，屏幕越清晰

若屏幕分辨率 = x * y，ppi = Math.sqrt(x * x + y * y)/屏幕尺寸

设备独立像素（Device Independent Pixels）：又称设备无关像素，简称DIP/DP，是一种逻辑单位，一般情况下用css像素表示。通过window.screen.width/window.screen.height可以查看到

设备像素比（Device Pixels Ratio）：物理像素与设备独立像素之比。windows系统显示设置中的缩放与布局，苹果系统中的UI看起来来类似，都是通过改变该值实现的。通过window.devicePixelRatio可以查看到

PC端，系统缩放为100%时：

console.log(window.screen.width == 1920); //trueconsole.log(window.screen.height == 1080); //trueconsole.log(window.devicePixelRatio == 1); //true

当将系统缩放改为125%时，

console.log(window.screen.width == 1536); //trueconsole.log(window.screen.height == 864); //trueconsole.log(window.devicePixelRatio == 1.25); //true

窗口文档显示区域：我们最终在浏览器中看到的窗口大小，可以通过window.innerWidth/window.innerHeight得到，这是个只读属性。pc端浏览器缩放，移动端手动缩放会改变该值。

pc端，当浏览器缩放(scale)到50%时， window.innerWidth = window.screen.width/scale

移动端的缩放无法像pc端那样清晰的显示出来，可以设置initial-scale = 0.5，也可以得出window.innerWidth = window.screen.width/initial-scale

由此可以看出: 若屏幕分辨率 = x * y，innerWidth = (x/dp)/scale, innerHieght +系统任务栏高度 + 浏览器工具栏高度 = (y/dp)/scale

物理像素，设备独立像素，像素比相关推荐

【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题
. 作者 :万境绝尘转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...
设备物理像素、设备独立像素
视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iph ...
移动端物理像素和设备独立像素
https://blog.csdn.net/aiolos1111/article/details/51880223 https://www.cnblogs.com/samwu/p/5341056.ht ...
设备像素，设备独立像素，CSS像素
之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理一些概念在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...
css 获取屏幕宽度_设备像素、设备独立像素、CSS像素、分辨率、PPI、devicePixelRatio 的区别...
设备像素 (device pixels) 也称为物理像素,显示器的最小物理单位.这里需要注意,一个像素并不一定是一个小正方形区块,也没有标准的宽高,只是用于显示丰富色彩的一个"点" ...
4.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？
一.背景在css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素这会造成一种错觉,我们会认为css中的像素就是设备的物理像素但实际情况却并非如此,css ...
css基础知识四：说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？
一.背景在css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素这会造成一种错觉,我们会认为css中的像素就是设备的物理像素但实际情况却并非如此,css ...
像素相关概念：PPI、DPI、设备像素、独立像素
前言我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们 ...
困扰前端的像素相关概念：PPI、DPI、设备像素、独立像素
我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们一些问 ...
设备像素、css像素、设备独立像素、dpr、ppi 之间的区别
一.背景在css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素这会造成一种错觉,我们会认为css中的像素就是设备的物理像素但实际情况却并非如此,css ...

物理像素，设备独立像素，像素比

物理像素，设备独立像素，像素比相关推荐

最新文章

热门文章