css的像素是一个抽象的相对的概念，在不同的设备和环境中，所表示的物理像素点是不一样的，在比较老的设备上，屏幕像素密度比较低，这样，确实一个1px的像素就是一个物理像素，但是技术飞速发展，现在的手机屏幕都是高分辨率，在尺寸未变化的情况下，一个屏幕上将充满着更多的像素点，这时一个css的像素(通常称为逻辑像素)将对应多个物理像素点。
那到底一个css的像素宽度上对应多少个物理像素点呢？
这就要提到devicePixelRatio（设备像素比）
devicePixelRatio = 设备上物理像素/独立像素，可以通过window.devicePixelRatio获取，这个像素比恰好可以描述一个css的像素宽度上对应多少个物理像素点，其实就是对应devicePixelRatio个像素点。
当viewport的属性initial-scale为1时，页面大小正常，但initial-scale为0.5时，页面被缩小了1倍，devicePixelRatio为2的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。
解决方法二：rem + viewport
说到这里，解决方法就很明了了：我们可以在运行的时候拿到设备的devicePixelRatio，动态改变viewport的initial-scale为 1/devicePixelRatio，这样就能保证1px的宽度就是真正的1物理像素宽。其他适配使用rem（因为使用px的话都会被缩小）
代码如下：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">--> <title>移动端1px边框问题</title> <script> (function () { var clientWidth = window.screen.width; var dpr = window.devicePixelRatio; var vp = document.createElement('meta'); document.documentElement.style.fontSize = clientWidth > 414 ? '20px' : 20 * dpr * clientWidth / 360 + 'px'; vp.name = 'viewport'; vp.content = `initial-scale=${1.0 * 1 / dpr}, maximum-scale=${1.0 * 1 / dpr}, minimum-scale=${1.0 * 1 / dpr}, user-scalable=no, width=device-width`; var m = document.getElementsByTagName('meta')[0]; m.parentNode.insertBefore(vp, m); })(); </script> <style> * { margin: 0; padding: 0; } ul, li{ list-style: none; } .lines { width: 10rem; margin: 0 auto; } .lines li { border: 1px solid #cccccc; height: 2.5rem; line-height: 2.5rem; text-align: center; border-radius: 0.6rem; margin-top: 0.5rem; } </style> </head> <body> <ul class="lines"> <li>1</li> <li>2</li> </ul> </body> </html> |
得到的效果可以看下图(手机上看更明显一些)：
