移動端Retina屏幕1px邊框問題

起因

• 設計師給出設計稿上明明是1px的邊框在移動端retina屏上顯示很粗(2倍屏上顯示爲2px，3倍屏上顯示爲3px)
• 設備像素比

注意

• 安卓不支持小於1的像素，所以通過設置border-width=0.5px不適用安卓

解決

• 通過高度爲1px的div，再通過scaleY縮小可以實現(不能做圓角，而且做4條邊很麻煩，排除)

  .border-line {
      height: 1px;
      -webkit-transform: scale(.5);
      transform: scaleY(.5);
      background: blue;
      overflow: hidden;
  }

• 通過僞元素寬、高放大後，再通過scale縮小可以實現(可以做圓角，代碼量過大，可以配合scss減少代碼量，但是在3倍屏下縮放後寬度不太精確，比如縮放0.33會顯小，縮放0.333會顯長，排除)

  @media (-webkit-min-device-pixel-ratio: 1) {
      .border-line:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 1px solid blue;
      }
  }
  @media (-webkit-min-device-pixel-ratio: 2) {
      .border-line:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 200%;
          height: 200%;
          border: 1px solid blue;
          -webkit-transform: scale(.5);
          transform: scale(.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
      }
  }
  @media (-webkit-min-device-pixel-ratio: 3) {
      .border-line:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 300%;
          height: 300%;
          border: 1px solid blue;
          -webkit-transform: scale(.333);
          transform: scale(.333);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
      }
  }

• 使用Flexible實現手淘H5頁面的終端適配

  • 方案1
    
    • 如果不在head裏寫<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    • flexible.js會自動在head裏創建一個meta標籤，具體的縮放比根據Retina屏幕設備像素比而不同，可能爲1、0.5或0.3333333333333333，如下圖：
      
    • 這樣能解決手機端1px問題，但是帶來了一個新問題，就是你的項目用到的所有插件都要能適應這種規範。舉個例子，你項目中用到了layer.js，那就gg了，因爲這個插件顯示的彈層尺寸在Retina屏幕上面會被相應的縮小
  • 方案2
    
    • 如果在head裏寫<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    • flexible.js就不會自動創建meta標籤了，縮放比固定爲1
    • 這樣無法解決1px邊框問題，但也是基於rem的一套手機端適配方案

  • 方案3

    • 方案2提供了基於rem的手機端適配方案，在此基礎上我們只要解決Retina屏幕1px問題就行了

    • 理解ios可以識別小於1的像素，而安卓不能，因此我們放棄對安卓端的1px問題的解決，只考慮ios端

      /* ios端2倍屏下寬度設爲.5px */
      @media (-webkit-min-device-pixel-ratio: 2) {
          .ios .g-border {
              border-width: .5px !important;
          }
      }
      
      /* ios端3倍屏下寬度設爲.4px */
      @media (-webkit-min-device-pixel-ratio: 3) {
          .ios .g-border {
              border-width: .4px !important;
          }
      }

效果

• ios(可以看到ios可以識別小於1的像素)
  

• 安卓(可以看到安卓無法識別小於1的像素)
  

參考

• 7種方法解決移動端Retina屏幕1px邊框問題
• 移動端1px的邊框