|  在技术加营销的道路上越走越远
温馨提示
我是弹窗内容
当前位置:首页 > 大前端开发 > CSS解决DPI为125%时网页被浏览器放大的bug,网页适配系统DPI设置
CSS解决DPI为125%时网页被浏览器放大的bug,网页适配系统DPI设置

CSS解决DPI为125%时网页被浏览器放大的bug,网页适配系统DPI设置

日期:2021-07-28 浏览量:492 原创作者:湖八爷
现在大部分笔记本电脑的屏幕分辨率都是1920px * 1080px,但是显示设置通常会默认设置放大125%,也就是DPI为125%。这样做的好处就是桌面上的软件看起来不会感觉太小,不好的地方就是各种软件也被相应的放大了125%,包括我们经常使用的浏览器,QQ客户端,微信客户端。

昨天我发了一篇在知乎回答的问题到自己的博客中,讲的就是和前端页面DPI适配相关的一个问题。然后收到了几个同学的私信,询问我具体的代码应该怎么写?所以今天我就针对这个问题重新写一篇文章。



一,我们先来看一下微信客户端和QQ客户端的解决方案。


1:下图是微信的解决方案,在设置中新增了一个“适配系统缩放比例”的功能。


微信适配系统缩放比例.png


2:下图是QQ的解决方案,同样是在设置中新增了一个“适配屏幕DPI设置”的功能。


QQ适配屏幕DPI设置.png



二,为什么我们要做页面DPI适配?


1:因为目前各大浏览器并没有推出自动适配系统缩放比例的功能,所以网站在浏览器中打开的时候,如果用户的系统DPI是默认放大的,那么网站也同样会被放大,导致网站开起来很臃肿,而且图片被放大后看起来会很模糊。


2:如果你的网站UI设计稿采用的是1920px * 1080px的格式,那么你现在可以立马用一台笔记本电脑检查一下,看看你的网站是否如我上面说的被放大了,如果没有被放大,说明你的笔记本的DPI是100%,如果被放大了,说明你的笔记本DPI为125%,甚至更高。


3:具体细节可以参考我昨天写的一篇文章《网站看起来比例失调,页面好像被放大了,是不是分辨率的问题?》。



三,应该怎么解决这个问题?

我觉得只有自己写适配代码这一个解决方案,因为不同用户的客户端DPI是不同的,我们又没法设置用户使用统一百分比的DPI。


笔记本电脑默认DPI放大125百分比.png


但是我们知道这个现象的原因是因为笔记本DPI=125%导致页面整体被放大了,于是我回到浏览器中,使用Ctrl + 鼠标滚轮将网页缩小,缩小到80%的时候,我发现这个效果和UI设计稿居然保持一致了,而且图片的大小也对的上。


所以到这一步,我们原因找到了,解决方案也有了,那就是通过代码适配页面的缩放,具体代码如下:


@media (max-width: 1919px) and (min-width: 768px) {
    html {
        zoom: 80%;
    }
    @-ms-viewport { width: 1920px; }
}


代码的原理是使用@media查询,针对不同屏幕尺寸设置不同的样式。