移動端1像素邊框問題與CSS媒體查詢

作移動端頁面開發時，咱們是按照UI設計圖上的尺寸來作的。

好比說，UI給的圖是750x1344（Iphone6標準），咱們在瀏覽器作適配時，按照375x667來裁切，設計圖上30像素的高度，開發時使用的是15px，這是由於Iphone6的設備像素比爲2，css中的1px在設備中的像素爲2px。當咱們須要實現設計圖中1px高度的邊框時，在css中的1px實際上變成了2px邊框，由此產生了1像素邊框問題。

一、window.devicePixelRatio設備像素比

定義：

window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

引用自張鑫旭大神的文檔

用於描述整個渲染環境在硬件設備上的縮放程度，在程序中能夠經過window.devicePixelRatio屬性來獲得這個值。

與之相關的概念以下：

物理像素（physical pixel）：設備能控制顯示的最小單位。
設備獨立像素（DIP，device-independent pixel，density-independent pixel）：獨立於設備的用於邏輯上衡量像素的單位。
每英寸像素量（PPI，pixels per inch）：一英寸長度上能夠並排的像素數量。

正常人眼能夠識別的分辨率爲300PPI，而如今不少設備的分辨率都超過了300PPI。若是設備老是以滿分辨率來顯示東西就可能形成文字過小，人們看不清。所以像瀏覽器這樣的軟件就會對內容作一次放大後再進行渲染，也就是下降分辨率。要下降分辨率就須要讓像素這個單位變大，所以PPI的計算再也不使用物理像素，而改用設備獨立像素。那麼設備獨立像素和物理像素之間就存在一個比例差別，這就是設備像素比。
單位dppx（dots per pixel）表示每一個DIP佔用幾個物理像素。能夠理解爲，CSS中的單位px在屏幕上佔用了多少物理像素。

引用自https://www.web-tinker.com/article/20590.html

 二、經常使用解決方案

2-一、border.css方案

在添加border樣式的元素上設置:before和:after樣式，而後在媒體查詢中根據device-pixel-ratio的值來縮放對應寬度和高度，來達到邊框大小爲物理像素1px

@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { position: relative;
} .border::before, .border-top::before, .border-right::before, .border-bottom::before, .border-left::before, .border-topbottom::before, .border-topbottom::after, .border-rightleft::before, .border-rightleft::after, .border-topleft::before, .border-topleft::after, .border-rightbottom::before, .border-rightbottom::after, .border-topright::before, .border-topright::after, .border-bottomleft::before, .border-bottomleft::after { content: "\0020"; overflow: hidden; position: absolute;
}
/* border * 因，邊框是由僞元素區域遮蓋在父級 * 故，子級如有交互，須要對子級設置 * 定位 及 z軸 */ .border::before { box-sizing: border-box; top: 0; left: 0; height: 100%; width: 100%; border: 1px solid #eaeaea; transform-origin: 0 0;
} .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { left: 0; width: 100%; height: 1px;
} .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { top: 0; width: 1px; height: 100%;
} .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before { border-top: 1px solid #eaeaea; transform-origin: 0 0;
} .border-right::before, .border-rightbottom::before, .border-rightleft::before, .border-topright::after { border-right: 1px solid #eaeaea; transform-origin: 100% 0;
} .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::before { border-bottom: 1px solid #eaeaea; transform-origin: 0 100%;
} .border-left::before, .border-topleft::after, .border-rightleft::after, .border-bottomleft::after { border-left: 1px solid #eaeaea; transform-origin: 0 0;
} .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before { top: 0;
} .border-right::before, .border-rightleft::after, .border-rightbottom::before, .border-topright::after { right: 0;
} .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::after { bottom: 0;
} .border-left::before, .border-rightleft::before, .border-topleft::after, .border-bottomleft::before { left: 0;
} @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
    /* 默認值，無需重置 */
} @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) { .border::before { width: 200%; height: 200%; transform: scale(.5);
    } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { transform: scaleY(.5);
    } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { transform: scaleX(.5);
    } } @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) { .border::before { width: 300%; height: 300%; transform: scale(.33333);
    } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { transform: scaleY(.33333);
    } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { transform: scaleX(.33333);
    } }

2-二、 lib-flexible.js-淘寶移動端方案

根據當前設備的window.devicePixelRatio，來設置viewport中的縮放比例，以達到設備物理像素=css像素

if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，對於2和3的屏，用2倍的方案，其他的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其餘設備下，仍舊使用1倍的方案
        dpr = 1; } scale = 1 / dpr; }
......

var metaEl = doc.createElement('meta'); var scale = isRetina ? 0.5:1; metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { document.documentElement.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); documen.write(wrap.innerHTML); }

引用https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

三、用到的css媒體查詢

@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)

max-device-pixel-ratio：設備像素比

max--moz-device-pixel-ratio：能夠用於兼容版本號低於16的Firefox瀏覽器

-webkit-max-device-pixel-ratio：基於webkit的瀏覽器不支持dppx

max-resolution：指定輸出設備的分辨率（像素密度），可替換老舊的 (max-device-pixel-ratio: 2)。分辨率能夠用每英寸（dpi）或每釐米（dpcm）的點數來表示。此處表示最大分辨率

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ (min-resolution: 2dppx), /* The standard way */ (min-resolution: 192dpi) /* dppx fallback */

引用https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries