Retina 屏移動設備 1px解決方案

時間 2019-11-08

原文原文鏈接

作移動端H5頁面開發時都會遇到這樣的問題，用 CSS 定義 1px 的實線邊框，在 window.devicePixelRatio=2 的屏幕上會顯示成 2px，在 window.devicePixelRatio=3 的屏幕上會顯示成 3px，明明但願是極細的線條，到 Retina 屏上卻變得粗大丑陋。這是由於 CSS 中的 px 單位定義的是邏輯像素值，而實際顯示的效果會以物理像素呈現，Retina 屏幕的物理像素值和邏輯像素值不一樣就形成了這種差別。css

若是想讓 HTML5 頁面像 Native App 同樣在 Retina 屏幕上顯示 1 物理像素的實線，該如何實現呢？html

方案一設置 border-width: 0.5px

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

遺憾的是只有iOS 8+ 和 OS X 支持 0.5pxandroid

可是在ios7如下，android等其餘系統裏，0.5px會被顯示爲0px，即該解決方案須要寫hack兼容老舊系統。ios

解決方案是在head部分添加一段 JavaScript代碼檢測瀏覽器可否支持0.5px的邊框，若是支持0.5px設置，給<html>元素添加個class。web

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

.item {
    border: 1px solid #ccc;
}
.hairlines .item {
    border-width: 0.5px;
}

那ios7如下和其它android機下怎麼解決這個問題？我的建議是：漸進加強 , 維持老樣，不去處理，隨着時間的推移，Retina屏最終都會支持0.5px 和 0.3 px邊框的。瀏覽器

一、經過viewport + REM的方式來兼容。

目前這種兼容方案相對比較完美，適合新項目。app

在devicePixelRatio = 2 時，輸出viewporturl

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

在devicePixelRatio = 3 時，輸出viewportspa

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

同時經過設置對應viewport的rem基準值，這樣就能夠像之前同樣設置1px了。scala

二、 transform: scale(0.5)

單條邊框的實現方式

height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;

只能單獨使用，若是嵌套，scale的做用也會對包含的元素產不想要的影響，因此此種方案配合:after和:before獨立使用較多，好比畫一個商品的邊框四條線，容器的after和before能夠畫2條線，利用容器的父元素的after、before再畫2條線。

.after-scale{
    position: relative;
}
.after-scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #c8c7cc;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

三、 box-shadow

實現方式

利用css 對陰影處理的方式實現0.5px的效果

底部一條線

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5)

優勢
基本全部場景都能知足，包含圓角的button，單條，多條線，

缺點

顏色很差處理，黑色 rgba(0,0,0,1) 最濃的狀況了。有陰影出現，很差用。

四、 background-image

實現方式

設置1px經過css 實現的image，50%有顏色，50%透明

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

優勢

配合background-image,background-size,background-position 能夠實現單條，多條邊框。邊框的顏色隨意設置

缺點：若是有圓角的效果，圓角的地方沒有線框的顏色。要寫的代碼也很多

五、用圖片

.border-image{
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}

缺點：也能夠經過修改圖片來達到圓角的效果，可是因爲圖片的緣由，壓縮事後的圖片邊緣變模糊了（不放大的狀況下不明顯），須要引用圖片或者base64，邊框顏色修改起來不方便。