window.devicePixelRatio 独立像素比（经典文章+原创）

设备像素/物理像素
设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
屏幕密度
通常以每英寸有多少物理像素来计算（PPI）。
独立像素/CSS像素
CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。在一个标准的显示密度下，一个CSS像素对应着一个设备像素。

<div style="width:320px; height：320px;background-color:blue;"></div>

就拿上面的代码来说（在头部没有加入<meta name="viewport" content="width=device-width">），在电脑端和手机端显示，结果是

出现这样的原因是因为电脑端显示设备的物理像素（液晶显示管）比较大，而手机的比较小，（生活中你可以发现电脑和手机都要存放很多液晶显示管，区别就是电脑的屏幕大，手机屏幕小）所以结果是同样要用200个物理像素结果就不一样了。
以上两张图片显示的结果是css样式的结果。

独立像素比/window.devicePixelRatio
window.devicePixelRatio=物理像素/独立像素。
通过计算你会发现刚才的两种手机的结果分别是1或者2（当然还有其它手机屏幕结果有些差别）

呵呵........
接下讨论一下，要想让手机显示上显示的结果和电脑一样大怎么办，所谓的一样大是，就是你用一把尺子量一下，电脑上长度和宽度各是200，手机上长度和宽度也各是200，也就是给人的视觉效果是一样大。

手机屏幕分为：
一：非视网膜屏幕（物理像素320，该设备的独立像素（视区宽度）也是320）
二：视网膜屏幕（物理像素640，该设备的独立像素（视区宽度）还是320，刚才手机显示的结果用的就是用的这个手机）

<meta name="viewport" content="width=device-width">
这个代码的作用就是让视图区域撑满手机物理屏幕。

html文件头部加上这个代码后，手机显示的大小和电脑显示的大小尺寸大小就一样了。
但是手机上显示的图片就模糊了，这是因为你要显示同样的物理大小，视网膜屏幕就要用双倍的物理像素来显示（一个一像素的图片，如果用浏览器4个像素（即放大了一倍）来看会变模糊和失真，所以在给手机做图片的时候，要放大一倍，就是在手机上显示的图片是100乘以100，那ps做图片要做成200乘以200这样才会清晰）。

哈哈.....
欢迎指正。
看到网上很多的文章看的我好晕，还说如果觉得文章就给他打赏，我他妈的看的头昏眼花还没有叫他赔钱呢。
大家如果觉得我的文章写到你的痛点了，或者有用请打赏。微信:youronglang 或者买点我自家代理的酒 关注微博：匠心酒