2019-8-13更新
所谓 viewport 就是规定了你网页的宽高，超过这个宽度就要换行；
每个手机有两种像素：设备物理像素（现在动不动都是上千的）、屏幕分辨率（一般都是固定的：320到 400 之间）；
这两个像素的比率就是 DPR；
参考文献：
要点总结：
前提：以下所有的视口都以设备逻辑像素大小表示
设备逻辑像素（dip）：其实就是设备分辨率中的单位大小，比如把电脑分辨率设为100×200，它的单位大小就是dip；把电脑分辨率设为300×400，它的单位大小就是dip；电脑本身实际大小是不变的，通过分辨率的改变，dip也随之改变。
布局视口（layout viewport）：可以认为，就是你进行页面布局时用的“布”的大小
视觉视口（visual viewport）：就是我们能看到的页面部分的大小
理想视口（ideal viewport）：理想情况下，我们进行页面布局时用的“布”的大小和设备的尺寸一样就好了，那么，设备的尺寸就是理想的布局视口的大小了
设备的大小其实就是设备的屏幕分辨率，那么理想视口大小也就是和屏幕分辨率一样大了
移动设备的屏幕分辨率基本都是出厂设定好的，一般在320到400之间
注意：屏幕分辨率并不等同于设备的实际物理像素大小，比如同样是360×640分辨率的安卓手机和苹果手机，苹果手机显示的就比安卓手机清晰，因为苹果手机实际的物理像素点（用来发光与显示多种颜色的实体物件）要比安卓手机多
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width=device-width 就是将布局视口的宽度设置成和设备宽一样大
