移動端邊框1px問題

邊框變粗的緣由

> css中的1px並不等於移動設備的1px,不一樣手機有不一樣的像素密度。window對象中有一個devicePixelRatio屬性,即css中的像素 / 設備的像素比

以前的解決方案

1. 0.5pxjavascript

經過javascript檢測瀏覽器可否處理0.5px的邊框,若是能夠則給html元素添加個classcss

if (window.devicePixelRatio && devicePixelRatio >= 2) {
    var test = document.createElement('div');
    test.style.border = '.5px solid transparent';
    document.body.appendChild(test);
    if (test.offsetHeight == 1) {
        document.querySelector('html').classList.add('hairlines');
    }
    document.body.removeChild(test);
 }

樣式以下html

div {
    border: 1px solid #bbb;
}
.hairlines div {
    border-width: 0.5px;
}

存在的問題
不兼容安卓和ios8如下設備java

2. 圖片實現borderios


能夠用gif、png或base64圖片web

.border {
    border-width: 1px;
    border-image: url(border.gif) 2 repeat;
}

存在的問題
須要改顏色的時候須要從新制做圖片,很不方便瀏覽器

** 3. 淘寶M站 viewport+rem實現**
devicePixelRatio = 2時,輸出viewportapp

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

devicePixelRatio = 3時,輸出viewporturl

<meta name = 'viewport' content='initial-scale=0.3333333333, maximum-scale=0.333333333333, minimum-scale=0.3333333333'>

再經過設置對應viewport的rem基準值,就能夠實現1px了。spa

存在的問題
多套樣式還須要動態改變viewport,有點繁瑣

僞類 + transform

原理是把原先的border去掉,而後利用:before 或者 :after 重作border, 並transform的scale縮小一半,原先的元素相對定位,新作的border絕對定位

.hairlines li {
    position: relative;
    border: none;
}

.hairlines li:after {
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
}
.hairlines li {
    position: relative;
    margin-bottom: 20px;
    border: none;
}
.hairlines li: after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
}

結合js代碼 判斷是不是Retina屏使用:
if (window.devicePixelRatio && devicePixelRatio >= 2) { document.querySelector('ul').className = 'hairlines' }

相關文章
相關標籤/搜索