让1px在不同的浏览器和设备中显示真正的1像素的效果的方法

1传统的实现方法

伪元素 + css3的缩放巧妙地实现；

基本步骤就是：

1. 设置目标元素定位参照

2. 给目标元素添加一个伪元素before或者after，并设置绝对定位

3. 给伪元素添上1px的边框

4. 设置伪元素的宽高为目标元素的2倍

5. 缩小0.5倍（变回目标元素的大小）

6. 使用border-box把border包进去

实例代码如下：

<div class="item4">测试用的边框</div>

<div class="item5">测试用的边框</div>

.item4, .item5 {

    width: 200px;

    height: 100px;

    position: relative;

}

 

.item4 {

    border: 1px solid #000;

}

 

.item5::before {

    content: '';

    position: absolute;

    width: 200%;

    height: 200%;

    border: 1px solid #000;

    transform-origin: 0 0;

    transform: scale(0.5, 0.5);

    box-sizing: border-box;

}

2js动态设置viewport的方案

使用js动态获取屏幕的设备像素比，然后动态设置viewport。是目前最好的解决方案。

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr +', user-scalable=no');

我们知道，一般我们获取到的视觉稿大部分是iphone6的，所以我们看到的尺寸一般是双倍大小的，在使用rem之前，我们一般会自觉的将标注/2，其实这也并无道理，但是当我们配合rem使用时，完全可以按照视觉稿上的尺寸来设置。

1. 设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏，也即是设备像素比(device pixel ratio)dpr比较大，所以显示的像素较为清晰。

2. 一般手机的dpr是1，iphone4，iphone5这种高清屏是2，iphone6s plus这种高清屏是3，可以通过js的window.devicePixelRatio获取到当前设备的dpr，所以iphone6给的视觉稿大小是（*2）750×1334了。

3. 拿到了dpr之后，我们就可以在viewport meta头里，取消让浏览器自动缩放页面，而自己去设置viewport的content例如（这里之所以要设置viewport是因为我们要实现border1px的效果，在scale的影响下，高清屏中就会显示成0.5px的效果）

附上JS获取当前对象大小以及屏幕分辨率等方法

 <script type="text/javascript">function getInfo(){ 
     var s = "";   
      s += " 网页可见区域宽："+ document.body.clientWidth+"\n";    
      s += " 网页可见区域高："+ document.body.clientHeight+"\n";    
      s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"\n";    
      s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+"\n";    
      s += " 网页正文全文宽："+ document.body.scrollWidth+"\n";    
      s += " 网页正文全文高："+ document.body.scrollHeight+"\n";    
      s += " 网页被卷去的高(ff)："+ document.body.scrollTop+"\n";    
      s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+"\n";    
      s += " 网页被卷去的左："+ document.body.scrollLeft+"\n";    
      s += " 网页正文部分上："+ window.screenTop+"\n";    
      s += " 网页正文部分左："+ window.screenLeft+"\n";    
      s += " 屏幕分辨率的高："+ window.screen.height+"\n";    
      s += " 屏幕分辨率的宽："+ window.screen.width+"\n";    
      s += " 屏幕可用工作区高度："+ window.screen.availHeight+"\n";    
      s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"\n";    
      s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n";    
      s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n";    
      alert (s);
    }
    getInfo();
  </script>