移動端H5頁面中1px邊框的幾種解決方法

時間 2019-12-05

標籤移動 h5 頁面 1px 邊框幾種解決方法欄目無線简体版

原文原文鏈接

問題提出

這是一個比較老的問題了，我第一次注意到的時候，是UI設計師來找我麻煩，emmm那時候我才初入前端職場，啥也不懂啊啊啊啊啊，情形是這樣的：
設計師拿着手機過來：這些邊框都粗了啊，個人設計稿上是1px的
我：？？？？我寫的是1px呀，不信你看。（說着拿出了css代碼
設計師：不對啊我眼睛看來這個邊框比我設計稿上粗不少，看起來好奇怪（emmm果真像素眼
我：那我把它改爲0.5px你看看（邊說邊改了代碼
設計師一看，點點頭，果真好不少。
後來發現一樣的代碼在某些安卓機上是有問題的，會致使0.5px的線看不見。
奇了怪了，顯然改爲0.5px不能解決問題，可是確實1px邊框看上去比設計稿上要粗不少，緣由何在？css

1px邊框的表現

我直接使用css去定1px的邊框，
html:html

<ul class="hairlines">
  <li>1</li>
  <li>2</li>
</ul>

css:前端

* {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      margin-top: 10px;
      border-bottom: 1px solid #cccccc; // 邊框設置成1px
    }

獲得的截圖以下：

看上去是比設計稿上要粗不少，設計稿上的應該是下面這樣的，你們能夠比對一下：
web

解決方法一：僞類+transform

抱着解決問題的心理，雖然當時也沒有想清楚緣由在哪，可是仍是找到了相關的解決方法，其中一些方法中提到使用邊框圖片border-image或者box-shadow，也能夠模擬出想要的1px邊框效果，可是我我的以爲不通用，也不是常規解決方法。
最終選擇的是使用僞類+transform方法：原理是把原先元素的 border 去掉，而後利用 :before 或者 :after 重作 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新作的 border 絕對定位。
html同上
css以下：json

* {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      border:none;
      margin-top: 10px;
    }
    .hairlines li:after{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      background: #cccccc;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

這樣的話，畫出的線確實細不少，我在以後長達一年的時間裏面通常都是使用上面的方法去解決1px邊框的問題，但用着用着，我發現了幾個問題：
1.爲何是scaleY(0.5)？這個0.5是怎麼得出的？是否是全部機型都是要scale縮小到一半，換句話說是否是通用？
2.若是我要同時畫一個容器的四個邊框怎麼辦？
3.支不支持圓角邊框？
後兩個問題改造一下上面的代碼，能夠找到解決方法(爲了方便查看效果，我把平時寫法得出的效果和使用僞類得出的效果放一塊兒，這樣更容易看出差異)：spa

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  <title>移動端1px邊框問題</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .lines {
      width: 200px;
      margin: 0 auto;
    }
    .lines li {
      border: 1px solid #cccccc;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 13px;
      margin-top: 10px;
    }
    .hairlines {
      width: 200px;
      margin: 0 auto;
      border-radius: 3px;
    }
    .hairlines li{
      height: 50px;
      line-height: 50px;
      border:none;
      text-align: center;
      position: relative;
      margin-top: 10px;
    }
    .hairlines li:after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      border: 1px solid #cccccc;
      border-radius: 26px;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }
  </style>
</head>
<body>
粗線
<ul class="lines">
  <li>1</li>
  <li>2</li>
</ul>
細線
<ul class="hairlines">
  <li>3</li>
  <li>4</li>
</ul>
</body>
</html>

這樣得出的效果圖以下：
.net

下面的邊框明顯細不少，更貼近於設計稿。
那麼「1.爲何是scaleY(0.5)？這個0.5是怎麼得出的？是否是全部機型都是要scale縮小到一半，換句話說是否是通用？」這個問題該怎麼回答呢？
這就要回到問題的本質，爲何我明明在css裏面寫了1px，可是仍然會出現「看起來比平時要粗不少的效果」？
查了資料看了下，原來css中設置的像素並非跟設備的像素點一一對應，這就是說，我在css中寫明1px，實際在手機上，看到的有可能並非一個像素點佔據的寬度。
css的像素是一個抽象的相對的概念，在不一樣的設備和環境中，所表示的物理像素點是不同的，在比較老的設備上，屏幕像素密度比較低，這樣，確實一個1px的像素就是一個物理像素，可是技術飛速發展，如今的手機屏幕都是高分辨率，在尺寸未變化的狀況下，一個屏幕上將充滿着更多的像素點，這時一個css的像素(一般稱爲邏輯像素)將對應多個物理像素點。
那到底一個css的像素寬度上對應多少個物理像素點呢？
這就要提到devicePixelRatio（設備像素比）
devicePixelRatio = 設備上物理像素/獨立像素，能夠經過window.devicePixelRatio獲取，這個像素比剛好能夠描述一個css的像素寬度上對應多少個物理像素點，其實就是對應devicePixelRatio個像素點。
當viewport的屬性initial-scale爲1時，頁面大小正常，但initial-scale爲0.5時，頁面被縮小了1倍，devicePixelRatio爲2的設備原本1個CSS像素寬度佔2個物理像素寬度，縮小後的1個CSS像素寬度就只佔1個物理像素，即實現了真正的1物理像素。scala

解決方法二：rem + viewport

說到這裏，解決方法就很明瞭了：咱們能夠在運行的時候拿到設備的devicePixelRatio，動態改變viewport的initial-scale爲 1/devicePixelRatio，這樣就能保證1px的寬度就是真正的1物理像素寬。其餘適配使用rem（由於使用px的話都會被縮小）
代碼以下：設計

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">-->
  <title>移動端1px邊框問題</title>
  <script>
    (function () {
      var clientWidth = window.screen.width;
      var dpr = window.devicePixelRatio;
      var vp = document.createElement('meta');
      document.documentElement.style.fontSize = clientWidth > 414 ? '20px' : 20 * dpr * clientWidth / 360 + 'px';
      vp.name = 'viewport';
      vp.content = `initial-scale=${1.0 * 1 / dpr}, maximum-scale=${1.0 * 1 / dpr}, minimum-scale=${1.0 * 1 / dpr}, user-scalable=no, width=device-width`;
      var m = document.getElementsByTagName('meta')[0];
      m.parentNode.insertBefore(vp, m);
    })();
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .lines {
      width: 10rem;
      margin: 0 auto;
    }
    .lines li {
      border: 1px solid #cccccc;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      border-radius: 0.6rem;
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>
<ul class="lines">
  <li>1</li>
  <li>2</li>
</ul>
</body>
</html>

獲得的效果能夠看下圖(手機上看更明顯一些)：
code

從上來看，回到以前的問題，"1.爲何是scaleY(0.5)？這個0.5是怎麼得出的？是否是全部機型都是要scale縮小到一半，換句話說是否是通用？"其實並不必定是0.5,在dpr爲3的設備上其實應該是0.3333……，也不通用，由於每一個手機的dpr可能不同，可是方法一中的0.5通常由於至少比1px細，因此也差很少能夠知足設計師的要求了。

參考：
淺談移動端開發--物理像素和邏輯像素