layout viewport ： 浏览器默认宽度，document.documentElement.clientWidth，iphone7 为 980；
visual viewport ： 浏览器可视区域的大小，screen.width,iphone7 为 375；
ideal viewport ： 移动端理想默认宽度,iphone 理想为375；不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕；
设备物理像素：移动设备的屏幕像素密度；
设备独立像素：移动设备的屏幕宽度；
我们在不设置任何viewport的时候，我们的手机，比如iphone7,浏览器默认的宽度，为980px，会自动计算浏览器的缩放比例，以达到和设备独立像素相同的宽度375，相当于缩小了980/375倍；
<head>
<title></title>
<meta charset="UTF-8"/>
</head>
<body>
<div style="width: 200px;height: 300px; border: 1px solid #000;">
这是在不设置viewprot后的200px
</div>
</body>
但当我们设置了
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
相当于把浏览器的宽度即layout viewport等于设备的宽度，本来980的，变为375；
这个时候，因为浏览器和设备的独立像素相同，自动计算浏览器的缩放比为1：1，不会发生缩小；
这个时候就会引进一个问题了，我们在设置1px的时候，在高清屏中，比如iphone7，会用两个物理像素来渲染；
设备物理像素和逻辑像素（设备独立像素），其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备物理像素1px，而CSS里记录的像素是逻辑像素（设备独立像素或者浏览器可见宽度）。
在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2；
正常情况下，border 1px的逻辑像素，在高清屏之中是用了2px的物理像素来显示；
viewport
移动端开发常需要在html的header里添加如下一句：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了浏览器的宽度为设备宽度，页面的初始缩放值和最大缩放值都为1，并禁止了用户缩放。
viewport : 设备屏幕上能用来显示我们网页内容的那一块区域；
width=device-width:把当前浏览器的宽度设置为设备独立像素宽度；
initial-scale=1.0:页面相对于设备独立像素缩放比例；
maximum-scale=1.0、minimum-scale=1.0 同上；
user-scalable : no； 禁止用户手动缩放；用户缩放的尺度越大，1px用的设备物理像素越大；
物理像素显示1px方法
主要都是通过缩放解决
1、viewport动态的修改页面的缩放比例
全局修改
var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}
即将浏览器在相同的宽度(width=device-width)下，页面缩放了一半或者1/3来显示，border也小了一半；
缺点：适用于项目，比如有些旧项目写了某个节点字体大小为2rem，750px中1rem = 100px时，2rem为200px,但是经过0.5缩放，要显示为200px时候，就要修改css的属性为4rem了，而且改动的地方是很多的；
2、transform: scale(0.5) 推荐
直接缩放需要设置的元素
用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。
.border {
position: relative;
}
.border::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform-origin: top left;
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border::after {
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border::after {
width: 300%;
height: 300%;
-webkit-transform: scale(0.33);
transform: scale(0.33);
}
}
其他方法
box-shadow 方案、background-image 渐变实现、设置 border-image 方案、媒体查询利用设备像素比缩放，设置小数像素
都会有圆角或者不支持的情况，不做描述；
结语：
1、当我们不设置任何viewport 属性时，移动端浏览器会自动缩放到和设备独立像素一直的宽度；
2、width=device-width:把当前浏览器的宽度设置为设备独立像素宽度，当浏览器和设备的独立像素相同时，不会发生缩放；
3、initial-scale 相当于我们在pc chrome中，用滚轮缩放页面一个道理；
4、解决1px的问题主要通过缩放解决；
参考：
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
