移動端視網膜（Retina）屏幕下1px邊框線解決方案

時間 2019-12-08

標籤移動端視網膜 retina 屏幕 1px 邊框解決方案欄目無線简体版

原文原文鏈接

緣由：javascript

由於Retine屏的分辨率始終是普通屏幕的2倍，1px的邊框在devicePixelRatio=2的retina屏下會顯示成2px。css

但在IOS8中，已經支持0.5px了，那就意味着, 在devicePixelRatio=2的時候，咱們可使用以下的css：html

div{
     border:1px solid #000;
}    

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

但在ios7如下，android等其餘系統裏，0.5px會被顯示爲0px，因此須要寫hack來兼容舊版本的系統。java

有兩種方案：android

一、JS判斷瀏覽器版本，是不是IOS8+，是的話則加上hairlines的類名，加在head裏便可。ios

CSS代碼：web

div{
      border:1px solid #000
}

.hairlines div{
      border-width:0.5px
}

JS代碼：瀏覽器

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

二、JS判斷是否支持0.5px的邊框，是的話，則加上hairlines的類名。（代碼放在body內）app

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;
}

優勢: