border设置1px看起来很粗问题

这篇文章纯属是一个引导，是我自己遇到了类似的问题在网上找到了一些方案，在解决这个问题之前我们需要先理解一下‘设备像素比’这个概念

描述：设备像素比（devicePixelRatio）
公式：设备像素比 ＝ 物理像素 / 设备独立像素 （注：在某一方向上）

问题本质：css中设置的像素并不是跟设备的像素点一一对应，这就是说，在css中写明1px，实际在手机上，看到的有可能并不是一个像素点占据的宽度。

css的像素是一个抽象的相对的概念，在不同的设备和环境中，所表示的物理像素点是不一样的，在比较老的设备上，屏幕像素密度比较低，这样，确实一个1px的像素就是一个物理像素，但是技术飞速发展，现在的手机屏幕都是高分辨率，在尺寸未变化的情况下，一个屏幕上将充满着更多的像素点，这时一个css的像素(通常称为逻辑像素)将对应多个物理像素点。

devicePixelRatio = 设备上物理像素/独立像素，可以通过window.devicePixelRatio获取，这个像素比恰好可以描述一个css的像素宽度上对应多少个物理像素点，其实就是对应devicePixelRatio个像素点。
当viewport的属性initial-scale为1时，页面大小正常，但initial-scale为0.5时，页面被缩小了1倍，devicePixelRatio为2的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。

1px问题思路就是通过window.devicePixelRatio判断设备显示器的设备像素比,动态设置html中head头部的meta标签 的 viewport的initial-scale为 1/devicePixelRatio，这样就能保证1px的宽度就是真正的1物理像素宽，下面是几篇文章的传送门，里面有具体的决绝方案

1. 详解移动端Html5页面中1px边框的几种解决方法
2. 像素、设备像素比、PPI、Viewport