viewport无法解决经典滚动条问题

viewport是网页的可见区域,可以通过设置meta标签来控制页面在移动设备上的显示。然而,它无法解决经典滚动条问题。例如,针对较宽(比如2000px)的PC设计的页面,我们可以设置viewport宽度为2000,以使得移动设备中初始渲染的页面效果刚好不出现滚动条。

在移动端,无论你给viewport设置多宽,如果没有指定默认的缩放值,则移动端浏览器会自动计算这个缩放值,以达到当前页面不会出现横向滚动条。但是,这并不能解决所有与滚动条相关的问题。例如,高倍屏幕(dpr较大)下会出现的两个经典问题:1、低倍图在高倍屏幕上展示模糊;2、1px宽度在底倍屏幕上不展示,因为无法表示0.5px,就直接当成0px。这些问题需要通过其他方式来解决。

作者

Nick

发布于

2024-02-08

更新于

2024-02-08

许可协议

评论