移動端1px產(chǎn)生原因及解決方案

前言

在retina屏中，像素比為2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的邊框看起來比真的1px更寬。

本文默認你已經(jīng)對視口、物理像素、邏輯像素、設備像素比、css像素等移動端基本概念已經(jīng)解。

產(chǎn)生原因

  • 設備像素比：dpr = window.devicePixelRatio ＝ 物理像素 / 邏輯像素。
  • 在retina屏的手機上, dpr為2或3，css里寫的1px寬度映射到物理像素上就有2px或3px那么寬。
  • 如iPhone6的dpr為2，物理像素750（x軸）,則它的邏輯像素為375。 也就是說，1個邏輯像素，在x軸和y軸方向，需要2個物理像素來顯示，即：dpr=2時，表示1個CSS像素由4個物理像素點組成，如下圖：

解決方案

1. 0.5px 方案

在IOS8+，蘋果系列都已經(jīng)支持0.5px了，可以借助媒體查詢來處理。

/*這是css方式*/
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
/*ios dpr=2和dpr=3情況下border相差無幾，下面代碼可以省略*/
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

IOS7及以下和Android等其他系統(tǒng)里，0.5px將會被顯示為0px。那么我們就需要想出辦法解決，說實在一點就是找到Hack。

解決方案是通過JavaScript檢測瀏覽器能否處理0.5px的邊框，如果可以，給html標簽元素添加個class。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
  document.querySelector('html').classList.add('hairlines');
}
  document.body.removeChild(testElem);
}
// 腳本應該放在body內(nèi)，如果在里面運行，需要包裝 $(document).ready(function() {})

然后，極細的邊框樣式就容易了：

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

優(yōu)點：簡單，不需要過多代碼。
缺點：無法兼容安卓設備、 iOS 7及以下設備。

2. 偽類+transform

原理：把原先元素的border去掉，然后利用:before或者:after重做border，并 transform的scale縮小一半，原先的元素相對定位，新做的border絕對定位。

/*手機端實現(xiàn)真正的一像素邊框*/
.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
    position: relative;
}

/*線條顏色 黑色*/
.border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
    background-color: #000;
}

/*底邊邊框一像素*/
.border-bottom-1px::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
}

/*上邊邊框一像素*/
.border-top-1px::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
}

/*左邊邊框一像素*/
.border-left-1px::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    transform-origin: 0 0;
}

/*右邊邊框1像素*/
.border-right-1px::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    transform-origin: 0 0;
}

/*邊框一像素*/
.border-1px::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid gray;
}


/*設備像素比*/
/*顯示屏最小dpr為2*/
@media (-webkit-min-device-pixel-ratio: 2) {
    .border-bottom-1px::after, .border-top-1px::after {
        transform: scaleY(0.5);
    }

    .border-left-1px::after, .border-right-1px::after {
        transform: scaleX(0.5);
    }

    .border-1px::after {
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
    }
}

/*設備像素比*/
@media (-webkit-min-device-pixel-ratio: 3)  {
    .border-bottom-1px::after, .border-top-1px::after {
        transform: scaleY(0.333);
    }

    .border-left-1px::after, .border-right-1px::after {
        transform: scaleX(0.333);
    }

    .border-1px::after {
        width: 300%;
        height: 300%;
        transform: scale(0.333);
        transform-origin: 0 0;
    }
}
/*需要注意<input type="button">是沒有:before, :after偽元素的*/

優(yōu)點：所有場景都能滿足，支持圓角(偽類和本體類都需要加border-radius)。
缺點：代碼量也很大，對于已經(jīng)使用偽類的元素(例如clearfix)，可能需要多層嵌套。

3. viewport + rem

同時通過設置對應viewport的rem基準值，這種方式就可以像以前一樣輕松愉快的寫1px了。
在devicePixelRatio = 2 時，設置meta：

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

在devicePixelRatio = 3 時，設置meta：

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

實例驗證：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>移動端1px問題</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" id="WebViewport"
        content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <style>
        html {
            font-size: 11px;
        }
        body {
            padding: 1rem;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .item {
            padding: 1rem;
            border-bottom: 1px solid gray;
            font-size: 1.2rem;
        }
    </style>
    <script>
        var viewport = document.querySelector("meta[name=viewport]");
        var dpr = window.devicePixelRatio || 1;
        var scale = 1 / dpr;
        //下面是根據(jù)設備dpr設置viewport
        viewport.setAttribute(
            "content", +
            "width=device-width," +
            "initial-scale=" +
            scale +
            ", maximum-scale=" +
            scale +
            ", minimum-scale=" +
            scale +
            ", user-scalable=no"
        );

        var docEl = document.documentElement;
        var fontsize = 10 * (docEl.clientWidth / 320) + "px";
        docEl.style.fontSize = fontsize;
    </script>
</head>
<body>
    <div class="item">border-bottom: 1px solid gray;</div>
    <div class="item">border-bottom: 1px solid gray;</div>
</body>
</html>

優(yōu)點：所有場景都能滿足，一套代碼，可以兼容基本所有布局。
缺點：老項目修改代價過大，只適用于新項目。

4. border-image

首先準備一張符合你要求的border-image：

通常手機端的頁面設計稿都是放大一倍的，如：為適應iphone retina，設計稿會設計成750*1334的分辨率，圖片按照2倍大小切出來，在手機端看著就不會虛化，非常清晰。 同樣，在使用border-image時，將border設計為物理1px，如下：

樣式設置：

.border-image-1px {
    border-width: 0 0 1px 0;
    border-image: url(linenew.png) 0 0 2 0 stretch;
}

上文是把border設置在邊框的底部，所以使用的圖片是2px高，上部的1px顏色為透明，下部的1px使用視覺規(guī)定的border的顏色。如果邊框底部和頂部同時需要border，可以使用下面的border-image：


樣式設置：

.border-image-1px {
    border-width: 1px 0;
    border-image: url(linenew.png) 2 0 stretch;
}

到目前為止，我們已經(jīng)能在iPhone上展現(xiàn)1px border的效果了。但是我們發(fā)現(xiàn)這樣的方法在非視網(wǎng)膜屏上會出現(xiàn)border顯示不出來的現(xiàn)象，于是使用Media Query做了一些兼容，樣式設置如下：

.border-image-1px {
    border-bottom: 1px solid #666;
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-image-1px {
        border-bottom: none;
        border-width: 0 0 1px 0;
        border-image: url(../img/linenew.png) 0 0 2 0 stretch;
    }
}

優(yōu)點：可以設置單條,多條邊框，沒有性能瓶頸的問題
缺點：修改顏色麻煩, 需要替換圖片；圓角需要特殊處理，并且邊緣會模糊

5. background-image

background-image跟border-image的方法一樣，你要先準備一張符合你要求的圖片：

此例是準備將border設置在底部 樣式設置：

.background-image-1px {
  background: url(../img/line.png) repeat-x left bottom;
  background-size: 100% 1px;
}

優(yōu)點：可以設置單條,多條邊框，沒有性能瓶頸的問題。
缺點：修改顏色麻煩, 需要替換圖片；圓角需要特殊處理，并且邊緣會模糊。

6. postcss-write-svg

使用border-image每次都要去調(diào)整圖片，總是需要成本的?；谏鲜龅脑?，我們可以借助于PostCSS的插件postcss-write-svg來幫助我們。如果你的項目中已經(jīng)有使用PostCSS，那么只需要在項目中安裝這個插件。然后在你的代碼中使用：

@svg 1px-border {
    height: 2px;
    @rect {
      fill: var(--color, black);
      width: 100%;
      height: 50%;
    }
}
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
 }

這樣PostCSS會自動幫你把CSS編譯出來：

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E")
          2 2 stretch;
  }

這個方案簡單易用，是我所需要的。目前測試下來，基本能達到我所需要的需求，在最新的適配方案中，我也采用了這個插件來處理1px邊框的問題。

總結(jié)

  • 0.5px，相信瀏覽器肯定是會慢慢支持的，目前而言，如果能用的話，可以hack一下。
  • 對于老項目，建議采用transform+偽類。
  • 新項目可以設置viewport的scale值，這個方法兼容性好。
  • postcss-write-svg簡單易用，僅適合直線，圓角建議用transform+偽類實現(xiàn)。
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容