如何解决移动端0.5px兼容性

最新推荐文章于 2024-04-07 14:38:43 发布

淼巷

最新推荐文章于 2024-04-07 14:38:43 发布

阅读量465

点赞数

本文链接：https://blog.csdn.net/JazzKatze/article/details/107838521

版权

解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给元素添加个class。

if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }