webview的1px问题

[AlexZ33]

背景

前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？ 原来一直没在意，源于自己根本不是像素眼…… 今天仔细瞅了瞅原生实现的边框和CSS设置的边框，确实差距不小……

scss写个mixin

@mixin border ($direction, $color:#f5f5f5, $opacity:1) {
  position: relative;

  &:after {
    content: '';
    position: absolute;

    @if $direction == 'left' {
      border-left: 1px solid $color;
      top: 0;
      left: 0;
      height: 100%;
      transform-origin: 0 0;
      opacity: $opacity;
    } @else if $direction == 'bottom' {
      width: 100%;
      border-bottom: 1px solid $color;
      left: 0;
      bottom: 0;
      transform-origin: 0 bottom;
      opacity: $opacity;
    } @else if $direction == 'top' {
      width: 100%;
      border-bottom: 1px solid $color;
      left: 0;
      top: 0;
      transform-origin: 0 bottom;
      opacity: $opacity;
    }@else if $direction == 'right' {
      width: 100%;
      border-right: 1px solid $color;
      left: 0;
      top: 0;
      transform-origin: 0 0;
      opacity: $opacity;
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      @if $direction == 'left' {
        height: 200%;
      } @else {
        width: 200%;
      }
      transform: scale(.5);
      @if $direction == 'right' {
        height: 200%;
      } @else {
        width: 200%;
      }
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
      @if $direction == 'left' {
        height: 300%;
      } @else {
        width: 300%;
      }
      @if $direction == 'right' {
        height: 300%;
      } @else {
        width: 300%;
      }
      transform: scale(.33);
    }
  }
}

@mixin border-1px($color: #e6e6e6, $borderRadius: 100px) {
  position: relative;
  border-width: 0;
  &:after {
    content: ' ';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid $color;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: $borderRadius;
  }
}

[AlexZ33]

或者

/*
*@mixin 主要供头发线来调用针对不同的dpr给1px解决方案
*/
@mixin prefixDpr($direct,$radius,$color:'bule',$dpr:2){
  $scaleVul:0;
  $scaleDirect:'scale';
  @if $dpr == 1 {
    &{
      @if $direct == 'all'{
        border: 1px solid $color;
        @if $radius{
          border-radius:#{$radius};
        }

      } @else{
        border-#{$direct}: 1px solid $color;
      }
    }
  }@else if $dpr >= 2 {
    $scaleVul:.5;

    &{
      @if $direct == 'all'{
        position:relative;
      }
      border: 0;
      border-radius:0;
    }
    &:before {
      content: ' ';
      display: block;
      position: absolute;
      box-sizing:border-box;
      top: 0;
      left: 0;
      transform-origin:0 0;
      width:100% * $dpr;
      height:100% * $dpr;
      pointer-events: none;
      transform: translate3d(0,0,0) #{$scaleDirect+'('+$scaleVul+')'};
      @if $direct == 'all'{
        border: 1px solid $color;
        border-radius: #{$radius};
      } @else{
        border-#{$direct}: 1px solid $color;
      }
    }
  }

}

/*
*@mixin 解决android下1px的问题（头发线）
*/
@mixin hairline($radius,$direct: 'all',$color: #666) {
  [data-os="ios"] & {
    @include prefixDpr($direct,$radius,$color,1);
  }

  [data-os="android"] &{
    @media only screen and (-webkit-min-device-pixel-ratio:1) {
      @include prefixDpr($direct,$radius,$color,1);

    }
    @media only screen and (-webkit-min-device-pixel-ratio:2) and (-webkit-max-device-pixel-ratio:3){

      @include prefixDpr($direct,$radius,$color,2);
    }
  }
}