触摸设备上的缩放，它到底有什么作用？

Question

老实说，我不明白这是怎么回事。

1. 地址栏中的页面缩放仍然是100%
2. 如果我使用 console.log 打印窗口、屏幕或元素的宽度/高度，它们仍然具有与 100% 时完全相同的值，就好像根本没有放大任何内容。
3. 但是当我看的时候，屏幕明显放大了！ 这是怎么回事？我如何检测到这一点？我只想在通过放大（通过触摸）区域拖动图像时实现滚动。但没办法说它放大了！ 另外，在这个放大（通过触摸）区域中使用恒定的 dx/dy 调用 window/scrollBy 没有任何作用！仅当我的指针位于该区域的real边界上时，它才起作用，放大时（通过触摸）甚至无法访问该边界。

更新：https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport 好吧，这里有一个实际的警告：“注意：只有顶层窗口才有与布局视口不同的视觉视口。因此，通常只有顶层窗口的 VisualViewport 对象才有用。对于 < iframe >，视觉VisualViewport.width 等视口指标始终对应于 document.documentElement.clientWidth 等布局视口指标。”

SO 无法从嵌入（通过对象标签）元素访问 VisualViewport？

Answer 1

解决此问题的方法可能是使用 Visual Viewport API。此 API 有助于提供网页的准确尺寸。由于缩放不会影响布局尺寸，因此 window.innerWidth 等属性不会检测到任何缩放。此外，无法从 iframe/object 标记内访问 VisualViewport API，因此您可能拥有的任何嵌入内容将无法检测到缩放。