造成原因
在以前,css的1px就是物理像素1px,但是由于现在手机屏幕变为高清屏幕,屏幕尺寸没变,但是像素点变多了,导致CSS 中的 1px 并不能和移动设备上的 1px 划等号。
设备像素比:window.devicePixelRatio = 设备的物理像素 / CSS像素,意味着css中写的border: 1px
实际就是1px * window.devicePixelRatio = 2px
,实际展示2个物理像素,看起来会粗一点。
解决方案
- 伪元素先放大后缩小(伪元素scale)
// 1px的border
div {
position: relative;
height: 30px;
}
::after {
content: "";
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid red;
transform: scale(0.5);
transform-origin: 0 0;
}
- 设置viewport解决问题(viewport+rem+js)
<script type="text/javascript">
let viewport = document.querySelector('meta[name=viewport]')
//下面是根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no')
}
function resize() {
let width = screen.width > 750 ? '75px' : screen.width / 10 + 'px'
document.getElementsByTagName('html')[0].style.fontSize = width
}
window.onresize = resize
</script>