移動端1px的解決方法
阿新 • • 發佈：2018-12-23
在上個專案中，移動端1px問題被困擾了好久，設定1px邊框，實際顯示2px。https://hzzly.github.io/2017/03/13/%E7%A7%BB%E5%8A%A8%E7%AB%AF1px%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95/
以下是我在專案中的解決方法，才疏學淺，輕噴。
關於什麼是移動端1畫素邊框問題，先上兩張圖，大家就明白了。
假的1px:
真的1px:
原來Retine屏的解析度始終是普通螢幕的2倍，1px的邊框在devicePixelRatio=2的retina屏下會顯示成2px。
解決方案
transform: scaleY()
| 12345678910111213141516171819202122232425262728293031323334 | <div class="border-1px"></div><style type="text/scss">.border-1px { position: relative; &:after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #000; content: ''; }}@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) { .border-1px{ &::after{ -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } }}@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) { .border-1px{ &::after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } }}</style> |
到這已經成功解決了1px問題。
好了，吃飯去嘍，溜了溜了。。。