移動端1畫素邊框問題的解決方案
阿新 • • 發佈：2019-02-13
自從喬幫主提出retina屏以來。可練就了不少前端兄弟的畫素眼，有強迫症的夥伴們日子可就煎熬了。為了畫出真正的1畫素邊框，前端猿們也是受盡各瀏覽器的虐待了。
關於什麼是移動端1畫素邊框問題，先上兩張圖，大家就明白了。
實現1PX邊框的方法有很多，各有優缺點，比如通過背景圖片實現、通過transform: scale(0.5)實現。本次實現的是通過VIEWPORT+rem實現的，優點是可以自適應已知的各類手機螢幕,且不存在其它方法存在的變顏色困難、圓角陰影失效問題。缺點嘛，這方法適全新專案，如果老專案想用這種方法，改動量估計會比較大。
關於裝置畫素比devicePixelRatio可以參考這文章http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
下面是程式碼：
<span style="font-size:18px;"><html> <head> <title>1px question</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> html { font-size: 1px; } * { padding: 0; margin: 0; } .bds_b { border-bottom: 1px solid #ccc; } .a, .b { margin-top: 1rem; padding: 1rem; font-size: 1.4rem; } .a { width: 30rem; } .b { background: #f5f5f5; width: 20rem; } </style> <script> var viewport = document.querySelector("meta[name=viewport]"); //下面是根據裝置畫素設定viewport if (window.devicePixelRatio == 1) { viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'); } if (window.devicePixelRatio == 2) { viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no'); } if (window.devicePixelRatio == 3) { viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no'); } var docEl = document.documentElement; var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; docEl.style.fontSize = fontsize; </script> </head> <body> <div class="bds_b a">下面的底邊寬度是虛擬1畫素的</div> <div class="b">上面的邊框寬度是虛擬1畫素的</div> </body> </html></span>
想看效果的，直接將程式碼複製下來放伺服器，用手機瀏覽就可以看到效果了。
順便吐嘈一下，CSDN部落格的移動端的邊框也不是真1畫素的……