CSS解决DPI为125%时网页被浏览器放大的bug，网页适配系统DPI设置
昨天我发了一篇在知乎回答的问题到自己的博客中，讲的就是和前端页面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查询，针对不同屏幕尺寸设置不同的样式。
