关于电脑设置分辨率放大125%、150%、200%、250%、300%后网页显示效果问题，页面跑乱了，css或者JS如何设置不让他放大网页，或者只放大到特定大小解决方案_vue3 电脑分辨率75%,125%,150%缩放导致页面变形的问题-CSDN博客

首先，网页缩放本身是浏览器的功能，CSS没法完全禁止，但可以用几个方案来实现限制，或者适配，

首先分清楚两种情况：
一种是禁止页面缩放，锁定为100%，
另一种是限制最大缩放比例，还有其实最好的方案是响应式适配，但用户问的是不让放大，所以先讲限制的方法，再讲适配的最佳实践？

方案一：禁止缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个标签原生对移动端生效，PC端现代浏览器也会遵循，但部分旧浏览器不会完全拦截，需要配合下面的JS动态修正。JS动态检测缩放比例，反向抵消放大，通过JS获取当前浏览器的缩放比例，给根元素设置反向zoom，让页面整体还原到100%大小：

// 获取当前页面缩放比例
const getZoom = () => {
    return window.devicePixelRatio || 1;// 兼容性写法
};
const fixZoom = () => {// 修正缩放
  const zoom = 1 / getZoom();
  document.documentElement.style.zoom = `${zoom}`;
};
fixZoom();// 初始化和缩放变化时修正
window.addEventListener('resize', fixZoom);

方案二、限制最大放大到特定大小

如果你不需要完全禁止，只需要限制最大放大比例（比如最多放大到125%，超过不再放大），可以在上面的基础上修改逻辑：

const MAX_SCALE = 1.25; // 你要限制的最大放大倍数
const fixZoom = () => {
  const currentScale = window.devicePixelRatio || 1;
  if (currentScale > MAX_SCALE) {// 如果当前缩放超过限制，才反向修正
      document.documentElement.style.zoom = `${MAX_SCALE / currentScale}`;
  } else {    
    document.documentElement.style.zoom = '1';// 不超过限制则不修改
  }
};

三、最佳实践：适配缩放，

实际上用户放大页面通常是为了获得更好的阅读体验，禁止缩放会影响可访问性，推荐从CSS响应式适配缩放，从根源解决布局错乱：比禁止缩放更友好

3.1、使用相对单位代替固定像素：不要给容器写死固定像素宽度，改用rem、百分比、vw/vh等相对单位，缩放时会自动等比适配。
3.2、增加容器宽限限制：给最外层页面容器添加最大最小宽度限制，避免放大后超出视口
3.3、使用弹性布局：优先用flex、grid布局代替传统浮动，天生支持动态缩放，不容易出现布局错乱。

四、其他问题

针对Windows系统显示缩放的特殊处理：如果是Windows系统本身显示缩放导致的模糊或错乱，可以加上：

html {
  /* 修正高DPI缩放模糊问题 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}