怎么设置物理像素的1像素，分享两种方法

关于device-pixel-ratio 的概念参照张鑫旭老师的这篇文章（设备像素比devicePixelRatio简单介绍[https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/]

首先我们设置mate

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，可以指定的一个值。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

创建一个容积盒子

<div class="box"></div>

css的方法

.box{
    width:200px;
    height: 200px;
    position: relative;
    /* border-bottom: 1px solid #000; */
    }
    /*设置底部border */
  .box:before{
    content: '';
    position: absolute;
    left: 0;
    /* right: 0; */
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #000000;
                
    }
    
      /* */
    @media screen and (-webkit-min-device-pixel-ratio:2) {
        .box:before{
            transform: scaleY(.5);
        }
    }
    
    @media screen and (-webkit-min-device-pixel-ratio:3) {
        .box:before{
            transform: scaleY(.333);
        }
    }

• 最后我们打开本地浏览器

• 切换到iphone 6

  
  1_WQ`6$PVG(CCPIPUH_9S_V.png

• 切换到iphone 6plus
  ![]T{JFLN1RU$QR(1`HHS4~HD.png](https://img.haomeiwen.com/i13756587/94afb469ab3879ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

js的方法

• 先给盒子设置设置一个底部的border

    .box{
        width:200px;
        height: 200px;
        position: relative;
        border-bottom: 1px solid #000;
        }

• js

    window.onload=function(){
        //获取像素比
        var dpr=window.devicePixelRatio;
        //缩放比例
        var width=document.documentElement.clientWidth
        var scale=1/dpr;
        var mateNode=document.querySelector('meta[name="viewport"]')
        mateNode.setAttribute('content',"width=device-width, initial-scale="+scale+ ", maximum-scale=1")
        //
        var html =document.querySelector('html');
        html.style.fontSize=width*dpr+'px'
    }