移動端1px問題

標籤：5*   相同   span   就會   hub   簡單   手機   color   顯示效果   

導致原因

在沒有寫移動端項目之前，1px = 1px在pc端是一直通用的，如果要加一條1px寬的細線，直接寫border: 1px solid #ccc;這樣就是可以的；但是後來接觸到移動端項目，才知道直接寫1px的線，放在移動端顯示的時候是比1px寬的，但這是為什麼呢？明明寫了1px的細線，在部分手機上就會顯示2px、3px的寬度呢？

原因就是移動端的解析度往往跟裝置的物理像素不匹配，例如iphone6s的解析度是750*1334，手機已375px的像素顯示，那麼在頁面中1px的像素就會顯示為2px，因為750/375*1px=2px;所以在移動端的顯示效果就會是看到兩個像素的寬度，如果要正常的顯示1px的細線，則需要設定border: 0.5px solid #ccc;這樣0.5px的像素在移動端顯示就是1px。

對於iphone還好，尺寸比例就那幾個固定的值，直接設定為0.5px就好，但是對於android裝置來說就沒有那麼容易簡單了，安卓裝置廠家眾多，螢幕及解析度的尺寸各不相同，所以就需要一個可以一勞永逸的方法來解決1px這種問題，下面列出幾種主流的解決方案。

解決方案

 1、使用小數

如上面提到的，可以使用小數來表示寬度，在移動端，移動端window對象有個devicePixelRatio屬性, 用它來表示裝置物理像素和css像素的比例，比如上面提到的比例為2，iphone上的比例一般為2或者3

這時可以使用媒體查詢來解決這個問題

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

但是這種方法android不適用

2、使用transform:scaleY

同樣可以根據devicePixelRatio來對1px進行伸縮，當devicePixelRatio=2是伸縮0.5，當devicePixelRatio=3時伸縮0.33333，大部分條件下，0.5就已經夠用了，差別不是特別大，事實上許多1px也是只做到了scaleY(0.5);

1 .line{2     width: 100%;3     height: 1px;4     background-color: black;5     margin-top: 100px;6     transform: scaleY(0.33333);7     transform-origin: 0 0;8 }

3、使用background漸層

背景漸層, 漸層在透明色和邊框色中間分割

1 @media screen and (-webkit-min-device-pixel-ratio: 2){2     .ui-border-t {3         background-position: left top;4         background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));5     }6 }

4、使用虛擬元素

div:after {  content: " ";  width: 100%;  height: 200px;  border-radius: 4px;  border: 1px solid #000;  transform: scale(0.5, 0.5);  transform-origin: 0 0;  position: absolute;}

這種方式可以設定圓角，同樣可以設定1邊border

5、使用border-image

自我感覺這種方法比較麻煩，還要處理圖片，聽不實用的，用的話可以參考

使用border-image實作類別似iOS7的1px底邊

移動端1px問題