像素比的问题

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

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

表头屏幕尺寸分辨率像素比iphone 6/7/8375 * 6671334*7502iphone 6/7/8 plus414 * 7361920*1080约等于3

利用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);