移动端视网膜(Retina)屏幕下1px边框线 解决方案

岁酱吖の 提交于 2020-01-28 19:02:52

原因:

因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px。

但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用如下的css:

 

div{
     border:1px solid #000;
}    

@media (-webkit-min-device-pixel-ratio: 2) {
    div{
          border:0.5px solid #000;
    }
}

但在ios7以下,android等其他系统里,0.5px会被显示为0px,所以需要写hack来兼容旧版本的系统。

有两种方案:

1、JS判断浏览器版本,是否是IOS8+,是的话则加上hairlines的类名,加在head里即可。

CSS代码:

div{
      border:1px solid #000
}

.hairlines div{
      border-width:0.5px
}

JS代码:

if (window.devicePixelRatio && devicePixelRatio >= 2) {
      document.querySelector('body').classList.add('hairlines')
}

  

2、JS判断是否支持0.5px的边框,是的话,则加上hairlines的类名。(代码放在body内)

if (window.devicePixelRatio && devicePixelRatio >= 2) {
      var testElem = document.createElement('div');
      testElem.style.border = '.5px solid #000';
      document.body.appendChild(testElem);

      //当div存在
      if (testElem.offsetHeight == 1){
        document.querySelector('html').classList.add('hairlines');
      }

      //添加完hairlines类名后,则删除div
      document.body.removeChild(testElem);
}

将代码放在body内会有一些重绘,第一种方法会更好一些。

 

当然这些方法,只能兼容IOS7包括IOS7以上的机器,但如果想兼容其他机器怎么办呢?这块我就要细细道来...

在retina屏下面,如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 你将永远无法写出1px宽度的东西。

关于CSS像素和物理像素的定义,这个文章里有详细的介绍  走向视网膜(Retina)的Web时代

在 viewport 中, 因为设置了initial-scale(表示初始时的缩放比例),minimum-scale(最小缩放比例)和maximum-scale(最大缩放比例)都为1, 因此整个页面都不能缩放, retina 屏幕下1个 css 像素对应 2个(多个)物理像素, 因此我们永远写不出1px(物理)宽度的东西. 然而我们其实可以这样写:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

淘宝M端 就是这样的方案,这样一个css的像素就能完美对应1个物理像素,我们就可以写出1px的东西了。

 

其他方案:

1. transform: scale(0.5)

方法1:

 CSS代码:

div{
        height:1px;
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin:0 0;
        overflow: hidden;
        background: #000;
}
  

  

HTML代码:

<body>
   1px边框线
   <div></div>
</body>

 

缺点

  圆角无法实现,实现4条边框比较麻烦,并且只能单独实现,如果嵌套,会对包含的效果产生不想要的效果,所以此方案配合:after和before独立使用较多。

  比如画一个商品的边框四条线,容器的after和before可以画2条线,利用容器的父元素的after、before再画2条线。

div{
   position: relative;
}

div:after{
   content:"";
   position: absolute;
   bottom:0px;
   left:0px;
   right:0px;
   border-bottom:1px solid #000;
   -webkit-transform:scaleY(.5);
   -webkit-transform-origin:0 0;
}

  

2. box-shadow

实现方法:

利用CSS对阴影处理的方式实现0.5px的效果。

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

优点:

基本所有场景都能满足,包含圆角的button,单条,多条线。

缺点:

  • 颜色不好处理, 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现,不好用。  
  • 大量使用box-shadow可能会导致性能瓶颈。
  • 四条边框实现效果不理想。

3. 使用background-image

使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。

 

渐变 linear-gradient   (50%有颜色,50%透明)

单条线:

 

div {
     height: 1px;
     background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%);
     background-position: top left;
     background-repeat: no-repeat
     background-size: 100% 1px;
}

 

多条线:  

div {
        background-image:-webkit-linear-gradient(top, transparent 50%, #000 50%),-webkit-linear-gradient(bottom, transparent 50%, #000 50%),-webkit-linear-gradient(left, transparent 50%, #000 50%),-webkit-linear-gradient(right, transparent 50%, #000 50%);
        background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
        background-repeat: no-repeat;
        background-position: top left, bottom left, left top, right top;
}

优点:

  • 可以设置单条,多条边框
  • 可以设置颜色

缺点:

  • 大量使用渐变可能导致性能瓶颈
  • 代码量大
  • 多背景图片有兼容性问题

  

用图片(base64):

div {
        border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
        border-width: 0px 0px 1px;
}

优点:

  • 可以设置单条,多条边框
  • 没有性能瓶颈的问题

缺点:

  • 修改颜色麻烦, 需要替换图片
  • 需要用到两张图片
  • 多背景图片有兼容性问题

  

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!