css中的1px并不等于设备的1px

在css中我们一般使用px作为单位，在浏览器中css的1个像素往往对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况并非如此，css中的像素只是一个抽象的单位，在不同环境中，css中的1px代表的设备物理像素是不同的。

移动端1px变粗的原因

为什么移动端css里面写了1px，实际看起来却比1px要粗？这里是因为 ‘px’ 的含义不一样
移动端html的head标签中总会有这样一段代码

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的
有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

解决方案

  1. 用小数点些px的值

IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样：

  1. .border { border: 1px solid #999 }
  2. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  3.     .border { border: 0.5px solid #999 }
  4. }
  1. background渐变

背景渐变, 渐变在透明色和边框色中间分割, frozenUI用的就是这种方法, 借用它的上边框写法:

  1. @media screen and (-webkit-min-device-pixel-ratio: 2){
  2.     .ui-border-t {
  3.         background-position: left top;
  4.         background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));
  5.     }
  6. }
  1. 使用transform实现

在移动端中，我们对宽度100%，1px的线进行改造，将其宽度设为200%，高度不变，之后使用transform对其缩放50%。

  1. .line{      
  2.     width:200% ;
  3.     height:1px ;
  4.     transform:scale(.5) ;
  5.     -ms-transform:scale(.5) ;
  6.     -o-transform:scale(.5) ;
  7.     -webkit-transform:scale(.5) ;
  8.     -moz-transform:scale(.5) ;
  9.     transform-origin:top left ;         
  10. }
  1. 利用box-shadow也可模拟1px细线边框，但缺点是颜色不好控制
    1. div {
    2.  -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
    3. }