解決移動端1px在一些屏幕會變粗的原因
一、起因
為什么移動端css里面寫了1px, 實際看起來比1px粗. 其實原因很好理解:這2個’px’ 的含義是不一樣的. 移動端 html 的 header 總會有一句
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話定義了本頁面的 viewport 的寬度為設備寬度,初始縮放值和最大縮放值都為1,并禁止了用戶縮放. viewport 通俗的講是瀏覽器上可用來顯示頁面的區域, 這個區域是可能比屏幕大的。
首先，我們了解devicePixelRatio這個東西
在window對象中有一個devicePixelRatio屬性，他可以反應css中的像素與設備的像素比。然而1px在不同的移動設備上都等于這個移動設備的1px，這是因為不同的移動設備有不同的像素密度。有關這個屬性，它的官方的定義為：設備物理像素和設備獨立像素的比例，也就是
devicePixelRatio = 物理像素 / 獨立像素 1px變粗的原因：
viewport的設置和屏幕物理分辨率是按比例而不是相同的. 移動端window對象有個devicePixelRatio屬性,
它表示設備物理像素和css像素的比例, 在retina屏的iphone手機上, 這個值為2或3,
css里寫的1px長度映射到物理像素上就有2px或3px那么長
二、終極解決方案
1.用小數來寫px值 （不推薦）
IOS8下已經支持帶小數的px值, media query 對應 devicePixelRatio 有個查詢值 -webkit-min-device-pixel-ratio, css可以寫成這樣
通過-webkit-min-device-pixel-ratio設置。
.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 }
}
如果使用less/sass的話只是加了1句mixin
缺點: 安卓與低版本IOS不適用, 這個或許是未來的標準寫法, 現在不做指望
2、flexible.js
這是淘寶移動端采取的方案, github的地址:https://github.com/amfe/lib-flexible. 前面已經說過1px變粗的原因就在于一刀切的設置 viewport 寬度, 如果能把 viewport 寬度設置為實際的設備物理寬度, css 里的 1px 不就等于實際 1px 長了么. flexible.js 就是這樣干的.
<meta name=”viewport”>里面的 scale 值指的是對 ideal viewport 的縮放, flexible.js 檢測到 IOS 機型, 會算出 scale = 1/devicePixelRatio, 然后設置viewport
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
devicePixelRatio=2時輸出meta如下, 這樣viewport與ideal viewport的比是0.5, 也就與設備物理像素一致
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
3、偽類+transform實現
對于解決1px邊框問題，我個人覺得最完美的解決辦法還是偽類+transform比較好。
原理：是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 縮小一半，原先的元素相對定位，新做的 border 絕對定位。
參考 https://blog.csdn.net/weixin_43675871/article/details/84023447
