移动端1像素展示问题解决方案

针对移动端 视网膜屏幕 设置1px 实际显示为 2px 问题，解决方法

使用方法： @include border(top, #ddd);

// 1像素边框
// $position:［边框位置］top, bottom, left, right
// $color:［边框颜色］
// $radius:［圆角］
// 使用：@include border(top, #ddd); 或 @include border(full, #ddd, 2px);
// 注意：父元素需使用相对定位：position: relative;

@mixin border($position: full, $borderColor: #ddd, $radius: 0) {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: $borderColor;
    @if $position == top {
        height: 1px;left: 0;right: 0;top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio:2) {
            &{
                -webkit-transform: scaleY(0.5);
                -webkit-transform-origin: 50% 0%;
            }
        }
    }
    @if $position == bottom {
        height: 1px;left: 0;right: 0;bottom: 0;
        @media only screen and (-webkit-min-device-pixel-ratio:2) {
            &{
                -webkit-transform: scaleY(0.5);
                -webkit-transform-origin: 50% 100%;
            }
        }
    }
    @if $position == left {
        width: 1px;top: 0;bottom: 0;left: 0;
        @media only screen and (-webkit-min-device-pixel-ratio:2) {
            &{
                -webkit-transform: scaleX(0.5);
                -webkit-transform-origin: 0% 50%;
            }
        }
    }
    @if $position == right {
        width: 1px;top: 0;bottom: 0;right: 0;
        @media only screen and (-webkit-min-device-pixel-ratio:2) {
            &{
                -webkit-transform: scaleX(0.5);
                -webkit-transform-origin: 100% 50%;
            }
        }
    }
    @if $position == full {
        border: 1px solid #ddd;top: 0;bottom: 0;left: 0;right: 0;
        background: none;
        border-color: $borderColor;
        @if $radius != 0 {
            border-radius: $radius;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2) {
            &{
                right: -100%;
                bottom:-100%;
                -webkit-transform:scale(0.5);
                -webkit-transform-origin: 0% 0%;
                $radiusx2: null;
                @each $i in $radius {
                    $radiusx2: append($radiusx2, $i * 2);
                }
                @if $radius != 0 {
                    border-radius: $radiusx2;
                }
            }
        }
    }
}