关于scale和dpr

你好同学，解答如下:

1.是说的initial-scale吧？很好理解，这个是设置页面缩放的。值设置1 ，就是没有缩放，值设置为2，页面就是原来的2倍，值设置0.5，就是缩小了一倍，依次类推.....。但是这种缩放只是视觉上的缩放，好比拿一个放大镜或者缩小镜看物体，物体本身大小是不会变的，只不过在镜子下，从视觉上感觉物体变大或者缩小了。

例如如下盒子,宽高设置了100px，

正常情况下，显示如下这样：

然后设置initial-scale=2，盒子确实变大了，但是按F12查看一下它的宽高，依旧是100px*100px

设置缩小也是同理，这个建议同学自己按照老师的小例子修改一下不同的值，观察一下。能够更好的帮你自己理解哦。

2.DPR是设备像素比，表示设备物理像素与设备独立像素的比例。因为这个是设备的一些概念，比较抽象，同学根据下面的老师的讲解进行理解：

(1) 物理像素也可以叫做设备的分辨率，在同一个设备上，物理像素个数是固定的，这是厂商在出厂时就设置好的 。（所以每一个设备的DPR也是固定的）例如你买一个iPhone6，它的分辨率（物理像素）为750×1334。你没有办法更改，除非换一个型号的手机~~~

(2) 设备独立像素是一个虚拟像素的总体概念，指的是我们在样式代码中使用到的逻辑像素，是浏览器使用的抽象的单位,例如px。

(3)  设备独立像素 * DPR = 物理像素 。可以通过这个公式理解DPR

DPR=1，设备物理像素与设备独立像素比例为1:1 。表示一个方向上的1个物理像素对应一个方向上的1个CSS像素。即使用1（1 X 1）个物理像素显示1个CSS像素。

DPR=2 ，设备物理像素与设备独立像素比例为2:1 。表示一个方向上的2个物理像素对应一个方向上的1个CSS像素（设备独立像素）。即使用4（2 X 2）个物理像素显示1个CSS像素。

（有关设备的这些概念比较抽象，理解起来不是那么容易。如果不理解的，可以先放一放，不用着急。实际开发中，很少涉及到。后面有时间再来回顾。因为对这一块理解起来比较乱的话，越想会越乱。）

3.获取视口宽度就是浏览器窗口的宽度，参考如下：

祝学习愉快，望采纳。