问题
由于浏览器和系统能够对页面进行缩放，比如Chrome：
image.png
一般情况下，我们写的网页都是在100%下写出来的，当被缩放时，显示就不正确了，会变得很怪异。比如，一个页面，100%情况下是这样的。
image.png
当放大过后，整个页面会变成这样：
image.png
虽说这是用户的设置问题，我们可以把责任推给用户，让用户自己把比例调成100%，但在代码层面，有办法解决吗？
解决
最终我找到了解决办法。用户不是把比例给放大了吗？那我们按照比例给他缩小不就可以了？于是，我进行了尝试，发现可以解决这个问题。网页我用vue写的，下面是我解决的办法。
在App.vue中，界面加载时，对body进行缩放，如下：
App.vue文件中
export default {
mounted() {
// window.devicePixelRatio就是当前浏览器和系统缩放过后的比例，我只需要反向缩放body即可。
document.body.style.zoom = 1 / window.devicePixelRatio;
},
};
完美解决，现在无论缩放成什么样子，页面都是正常的100%显示。目前来看，还没有发现这么做的弊端，后面出现了再解决吧。
网友评论