-
分辨率就是window的屏幕分辨率。分辨率，物理像素，设备像素是一个东西。实际开发中不以物理像素为准
-
css像素，逻辑像素，设备独立像素是一个东西，实际开发中使用css像素。iphone6的375像素是逻辑像素
-
设备像素比dpr ：同一方向缩放比例是1的情况下
dpr=设备像素/css像素
在同一方向上标清屏一个物理像素对应一个css像素，而高清屏2个物理像素对应1个css像素，所有标清屏的dpr为1，高清屏的dpr为2。
dpr=1，可以理解为设备像素和css像素是一对一的关系。
dpr=2，可以理解为设备像素和css像素是二对一的关系。 -
缩放：改变的是css像素对应的物理像素的个数。
缩放-放大
如果一个css像素对应1个物理像素的话。
设置为放大一倍：
那就是同一方法上两个css像素对应1个物理像素；或者说一个css像素对应2*2个物理像素。
总结：一个物理像素对应的css变多了，css像素会变大。css像素被放大了，原有页面对应的css像素的物理像素点变多了。一个页面最终放大之后css像素总数反而变少了
缩小一倍：
2*2个css像素对应1个物理像素，或者说1个css像素对应四分之一的物理像素。 -
ppi:每英寸的物理像素点
-
在不设置viewport的情况下：
参考新浪首页变手机首页的模样，发现：整个页面的数据变小在一个页面显示。
css：375px。
----在不设置viewport的情况下：
在iphone6下的视口为980px；为了解决看不完整就要拖动滚动条的问题。为了在手机上显示完整iphone默认，会将980px的页面缩小到屏幕大小375px；
会将页面显示在一个980px的视口中再缩小到375px的视口内
----在设置了viewport的情况下（缩放比为1）：
将视口宽度，调整为设备的css宽度，页面看上去不比不设置视口的大一些。
pc页面过大要拖动横条。意思是不会缩小， -
-------关于缩放的理解！ initial-scale=1; 初始的缩放比例为1。
--------initial-scale=1相当于width=device-width，
--------initial-scale=1表示不需要缩放，什么情况下不需要缩放？
答：原来的980需要缩放，你设计页面的宽和设备相等的时候就不需要缩放。所以width=device-width隐含了这个意思。
------放大的情况：initial-scale=2 表示css像素被放大了，他对应的css像素的物理像素点变多了。 initial-scale=1 html的css为375，initial-scale=2 html的css为187.
横向物理像素点不变 现在187个像素就可以表示之前375个像素表示的物理像素点。
放大之后187要乘以2，之前是375乘以1。他们表示同样的像素点。 最终放大之后css像素反而变少了。
-------缩小的情况：initial-scale=0.5 做小之后由原来的375变成了750。 因为缩小了一半，之前只要375描述的现在要750个像素来描述。
因为1个css像素对应的物理像素点变少了。所有他本身要变大，保证他们总数是不变的。最大最小缩放比例不同浏览器有不同的限制。一般5以内的都可以。 单写不同浏览器有不同的问题，大家都写上就可以了。
-----user-scalable：用户可否缩放 yes , no 。
--------user-scalable=no相当于maximum-sacle =1,minumum-scale = 1（字面意思） !!!这么写了，很多国外的浏览器用户还是可以缩放，国内的支持还行。 视口-viewport
1.标签：
<meta name="viewport" content="=width=device-width，initial-scale=1，user-scalable=no，maximum-scale=1,minimum-scale=1"/>-----标准写法
-----------这么写了，如何在js中获取参数呢？
1> iphone6/7/8 1》window.innerWidth：375 2>window.document.documentElement.clientWidth: 375
3>window.document.getBoundingClientRect().width(); 375考虑兼容问题：1|| 2 || 3
screen.width—不建议，不同浏览器处理方式不一样兼容问题(有时候获取到视口像素用css描述，有时候获取物理像素去了)
-----dpr：通过js获取 window.devicePixelRatio；设备像素比
不设置viewport
iphone6实验
这里的css像素在变！！！变的是页面的初始画布的大小。
页面设置最外层宽200px，里面用百分比。图片1280*1280
结论：不写viewport 页面视口980px页面在这里渲染（实际375），在手机上视觉页面会变小。
写了viewport ,缩放比为1，就是视口和css像素一样，375，视觉页面变大。
写了缩放2。页面更大。html标签像素187
缩放0.5 。。html标签像素750
问题：关于图片像素模糊的问题？
https://blog.csdn.net/qq_42704649/article/details/86507883