前端页面在 Ctrl + 滚轮时页面缩放，保持页面比例不动

防止前端页面缩放失真

最新推荐文章于 2025-12-08 22:53:17 发布

原创最新推荐文章于 2025-12-08 22:53:17 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Ctrl + 滚轮滑动可以使得前端页面方法缩小，页面内容比例会失衡，不好看。但是页面都已经做完不好再进行深层次的优化。那么就可以使用如下方式进行固定
想法：页面缩放会触发 resize 事件

const adjustForZoom = () => {
  // 获取当前浏览器窗口比例
  const zoomLevel = window.devicePixelRatio;
 
  if(zoomLevel > 1) {
    document.body.style.zoom = 1 / zoomLevel;
  }
};

window.addEventListener('resize', adjustForZoom);
adjustForZoom();