如何修改visualViewport的缩放比例与坐标？

visualViewport接口的属性确实是只读的，它仅用于获取当前视觉视口的状态，无法直接修改。要调整视觉视口的缩放和坐标，需要通过浏览器提供的其他API间接实现：

一、调整视觉视口缩放比例 #

1. 动态修改meta viewport标签
   这是控制页面缩放的标准方式，通过调整initial-scale属性可以改变视觉视口的缩放比例，示例代码：

const metaViewport = document.querySelector('meta[name="viewport"]');
// 将缩放比例设置为2.0
metaViewport.setAttribute('content', 'width=device-width, initial-scale=2.0, user-scalable=yes');

注意：这种方式会重置布局视口，页面会重新渲染，且部分浏览器可能限制缩放范围（比如最小/最大缩放比例）。

2. 使用CSS transform实现局部缩放（非视觉视口全局缩放）
   如果不需要全局修改视觉视口，仅需缩放页面内容，可以给根元素添加transform: scale()样式：

document.documentElement.style.transform = 'scale(1.5)';
document.documentElement.style.transformOrigin = 'top left';

这种方式不会改变visualViewport.scale的值，但能达到视觉上的缩放效果，且不会影响布局视口。

二、调整视觉视口坐标（滚动位置） #

视觉视口的坐标对应页面的滚动区域，通过控制页面滚动即可改变视觉视口的位置，常用方法：

• 直接滚动到指定坐标：

window.scrollTo({
  top: 300, // 垂直滚动位置
  left: 100, // 水平滚动位置
  behavior: 'smooth' // 可选，开启平滑滚动
});

• 相对当前位置滚动：

window.scrollBy({
  top: 100,
  left: 50,
  behavior: 'auto'
});

执行滚动后，visualViewport.offsetTop和offsetLeft会自动更新为新的视觉视口坐标。

注意事项 #

• 移动端和桌面端的视觉视口行为存在差异，部分桌面浏览器可能不支持visualViewport接口的全部特性
• 修改meta viewport的缩放可能会触发页面重排，影响性能，需谨慎使用
• 部分浏览器会限制脚本对缩放的控制，防止恶意行为

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