标签：devicePixelRatio IPhone6 像素 关于 设备 CSS 物理
定义
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
理解
移动端的设备多种多样，不同的设备又有不同的分辨率，低一点的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 1080，甚至还有更高的 4k 屏等。
我们在开发移动端页面时，将视口（viewport）设置为设备宽度（device-width）后，同一份页面在这些不同的设备上会出现相同的表现。
为什么这些设备拥有不同的分辨率，而在渲染页面时表现都一样呢？其实这是由设备像素比造成的。
设备像素比是怎么发挥作用的呢？要理解这个问题，需要三块预备知识：
设备独立像素
DPI/PPI
CSS 中的像素
设备独立像素
设备的独立像素是和设备的分辨率相关联的，比如 IPhone6 的分辨率为 1334 * 750，那么表示该手机的屏幕上有 1366 * 750 个物理像素，而 Galaxy S5 的屏幕上有 1280*720 个像素。
PPI/DPI
表示每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像
计算公式——
以 IPhone6 为例，可以计算出的 IPhone6 的 PPI 为：325.16。该结果表示在 IPhone6 上，每英寸有 325.16 个物理像素，四舍五入为 325 个物理像素。
可以发现：这个 PPI 的值近似等于 IPhone6 这个设备的水平物理像素的一半，也即：
750 / 325 = 2
1
这个由设备水平物理像素和设备 PPI/DPI 计算出来出来的比值就是设备像素比。
CSS 中的像素
CSS 中的像素是一个相对值，不是绝对值，因此1px 的 CSS 像素并不一定等于 1px 的物理像素。
需要注意的是，CSS 中的像素单位是抽象的，只是一种规范，最终的显示是取决于物理设备的。物理设备根据某种规则，决定该采用几个物理像素去显示 1px 的 CSS 像素，这个规则就是设备像素比。
设备像素比
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；
当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；
当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。
如下图所示：
前面已经说到过，设备像素比等于设备的水平物理像素和设备 PPI 的比值。设备像素比的意义就是决定了用多少个物理像素去显示 1px 的 CSS 像素。比如在 IPhone6 中，设备像素比为 2，那么在 IPhone6 上就会使用 2*2 = 4 个物理像素去显示 1px 的 CSS 像素。
因此，如果我们给一个 DIV 元素设置 300px * 300px 的样式，那么其在 IPhone6 上将会占用 600 * 600 个物理像素。这就是为什么明明 IPhone6 的分辨率为 1334 * 750（物理像素），而将 DIV 元素的宽度设置成 300px 后，其几乎占满了水平屏幕的原因。
上例在 IPhone 中的渲染效果也可以理解为：在分辨率为 667 * 325（设备宽度不变），设备像素比为 1 的设备上显示 300px 宽度的 DIV 的效果。既然设备像素比为 1，那么也可以这么理解：上例在 IPhone6 中的显示效果相当于在 667 * 325 的 Chrome 浏览器下的显示效果。
Galaxy S5 的设备像素比为 3，因此在 Galaxy S5 中的显示效果可以理解为在 660 * 360 的 Chrome 浏览器下的显示效果。
这也解释了为什么不同分辨率的设备，对于 300px 宽度的 DIV 展示效果基本一致的情况。
window.devicePixelRatio
window 对象有个 devicePixelRatio 属性，其中也保存了设备像素比的值，因此我们不必经过上面的公式计算，就可以直接获取到设备像素比的值。
注意：你可以为这个 window.devicePixelRatio 重新赋值，但并不会对最终的显示造成任何的影响
window.devicePixelRatio = 10
window.devicePixelRatio // 10
1
2
3
上面重新设置了 window.devicePixelRatio 的值，但不会影响浏览器的显示效果，也就是说，手动设置 window.devicePixelRatio 是没有任何用处的。
注意
我们需要记住一点：1px 的 CSS 像素并不一定等于 1px 的物理像素，不同的设备会根据其对应设备像素比决定使用多少个物理像素显示 1px 的 CSS 像素。
另外，在移动端不建议使用 px 作为布局单位，而是应该使用 rem 或者百分比作为布局单位。
标签：devicePixelRatio,IPhone6,像素,关于,设备,CSS,物理 来源： https://www.cnblogs.com/thinkingthigh/p/15935075.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。