javascript解决浏览器放大和缩小导致的显示问题

项目中有遇到客户根据个人喜好对浏览器自带的缩放比进行了设置，或使用鼠标滚轮对网页进行随意的缩放，导致网页变形等，又要求必须调整的，这是很棘手的问题，解释不清楚，只能采取非常规手段，屏蔽鼠标滚轮缩放，检测浏览器和系统缩放过后的比例，反向缩放body即可，只是暂时解决此类问题，不知道是否有其他更好的解决方案。

一般情况下，我们写的网页都是在100%下写出来的，当被缩放时，显示就不正确了，会变得很怪异，虽说这是用户的设置问题，我们可以把责任推给用户，让用户自己把比例调成100%，但说服客户的过程往往又很困难。

原理是检测网页视口被放大多少，按照此比例缩小多少。

`

    // 设置 body 的缩放比例，反向缩放以恢复原始尺寸
    document.body.style.zoom = 1 / zoomRatio;

    // 监听 wheel 事件，阻止缩放操作
    window.addEventListener('wheel', function (e) {
        if (e.ctrlKey) {
            // 如果按下了 Ctrl 键，则阻止默认行为
            e.preventDefault();
        }
    }, { passive: false });
});

`

在App.vue中，界面加载时，对body进行缩放，如下

App.vue文件中

export default {
  mounted() {
        // window.devicePixelRatio就是当前浏览器和系统缩放过后的比例，我只需要反向缩放body即可。
        document.body.style.zoom = 1 / window.devicePixelRatio;
  },
};