移动端1px与viewport

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倍；


        
        
    
    
        
            这是在不设置viewprot后的200px

页面被缩小.png

但当我们设置了

相当于把浏览器的宽度即layout viewport等于设备的宽度，本来980的，变为375；
这个时候，因为浏览器和设备的独立像素相同，自动计算浏览器的缩放比为1：1，不会发生缩小；

页面没有被缩小.png

这个时候就会引进一个问题了，我们在设置1px的时候，在高清屏中，比如iphone7，会用两个物理像素来渲染；

设备物理像素和逻辑像素（设备独立像素），其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备物理像素1px，而CSS里记录的像素是逻辑像素（设备独立像素或者浏览器可见宽度）。

在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2；

正常情况下，border 1px的逻辑像素，在高清屏之中是用了2px的物理像素来显示；

viewport

移动端开发常需要在html的header里添加如下一句：

这句话定义了浏览器的宽度为设备宽度，页面的初始缩放值和最大缩放值都为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" 解释

移动端1像素边框问题