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 或者买点我自家代理的酒 关注微博：匠心酒