昨天我发了一篇在知乎回答的问题到自己的博客中,讲的就是和前端页面DPI适配相关的一个问题。然后收到了几个同学的私信,询问我具体的代码应该怎么写?所以今天我就针对这个问题重新写一篇文章。
一,我们先来看一下微信客户端和QQ客户端的解决方案。
1:下图是微信的解决方案,在设置中新增了一个“适配系统缩放比例”的功能。
2:下图是QQ的解决方案,同样是在设置中新增了一个“适配屏幕DPI设置”的功能。
二,为什么我们要做页面DPI适配?
1:因为目前各大浏览器并没有推出自动适配系统缩放比例的功能,所以网站在浏览器中打开的时候,如果用户的系统DPI是默认放大的,那么网站也同样会被放大,导致网站开起来很臃肿,而且图片被放大后看起来会很模糊。
2:如果你的网站UI设计稿采用的是1920px * 1080px的格式,那么你现在可以立马用一台笔记本电脑检查一下,看看你的网站是否如我上面说的被放大了,如果没有被放大,说明你的笔记本的DPI是100%,如果被放大了,说明你的笔记本DPI为125%,甚至更高。
3:具体细节可以参考我昨天写的一篇文章《网站看起来比例失调,页面好像被放大了,是不是分辨率的问题?》。
三,应该怎么解决这个问题?
我觉得只有自己写适配代码这一个解决方案,因为不同用户的客户端DPI是不同的,我们又没法设置用户使用统一百分比的DPI。
但是我们知道这个现象的原因是因为笔记本DPI=125%导致页面整体被放大了,于是我回到浏览器中,使用Ctrl + 鼠标滚轮将网页缩小,缩小到80%的时候,我发现这个效果和UI设计稿居然保持一致了,而且图片的大小也对的上。
所以到这一步,我们原因找到了,解决方案也有了,那就是通过代码适配页面的缩放,具体代码如下:
@media (max-width: 1919px) and (min-width: 768px) { html { zoom: 80%; } @-ms-viewport { width: 1920px; } }
代码的原理是使用@media查询,针对不同屏幕尺寸设置不同的样式。