1px的问题(像素比的问题)

像素比的问题

当我们在手机端设置边框或者其他属性时候。发现我们设置的1px属性和屏幕显示的像素不一样。

原因是非常简单的。我们先看下面两个手机型号

利用window.devicePixelRatio 可以得出，实际尺寸和分辨率的像素比。如果是2倍的话，那么同等物理单位1px 就会等于2px css 分辨率。那么大的分辨率，塞进那么小的屏幕里面，那么同等物理单位里面应该包含更多单位分辨率。那么包含多少，就要看他的像素比，得出2倍、3倍或者更多的量。

本来这是没什么问题，（我觉得的哈哈😃）。但是测试那边，或者严格的设计会觉得这不行。那么我们就看看这个解决的方法:

• 首先要设置这个style 标签
• 设置css 添加一个类，这个类的内容就是将border的宽度，做一个计算。1/window.devicePixelRatio。并且提升优先级。
• 加入头部。那就会根据不同的设备的像素比设置他以分辨率为基础的像素。
• 然后在需要添加border的元素上面，添加这个类就可以了
• 方法不限，实现就行

let bPx = document.createElement("style");
bPx.innerHTML = `
    .border1{
        border-width: ${1/window.devicePixelRatio}px !important; 
    }
`;
document.head.appendChild(bPx);