显示器缩放超100%时，如何用JavaScript调整网页缩放？

• 无法直接通过JavaScript修改系统级的显示器缩放比例，这是浏览器的安全限制，防止网页随意篡改用户系统设置。
• 但可以通过调整网页自身的渲染表现来适配系统缩放：
  • 方法一：使用CSS的transform: scale()实现视觉缩放，示例代码：

    body {
      transform: scale(0.8); /* 对应抵消125%的系统缩放 */
      transform-origin: top left;
    }
    

    这种方式仅改变网页视觉大小，可能导致布局错位、字体模糊，且页面实际可滚动范围不会变化。
  • 方法二：动态修改<meta name="viewport">标签（移动端适配常用，桌面端部分浏览器支持），示例代码：

    const viewportMeta = document.querySelector('meta[name="viewport"]');
    viewportMeta.setAttribute('content', 'width=device-width, initial-scale=0.8, maximum-scale=0.8');
    

    桌面浏览器对该属性的支持度不如移动端，效果可能存在差异。
  • 方法三：通过window.devicePixelRatio获取当前设备像素比（比如150%系统缩放对应值为1.5），以此为依据动态调整页面字体、元素尺寸等布局参数，实现自然适配，而非强制缩放。

注意：所有网页端调整仅作用于当前页面，无法改变系统显示器缩放设置。强制缩放可能破坏页面响应式设计，建议优先通过响应式布局适配不同像素比。

内容的提问来源于stack exchange，提问作者Ibrahim