页面更改时重置浏览器缩放级别答案

【问题标题】：Reset browser zoom level when a page change页面更改时重置浏览器缩放级别
【发布时间】：2012-04-23 07:53:20
【问题描述】：

我有一个使用 ajax 加载页面的移动网站。我想添加的功能之一是在页面更改时重置缩放级别。

有没有一种好的方法可以检测用户在查看页面时是否缩放了视图？

到目前为止，我已经设法检查捏缩放。但有时也有双击缩放..

【问题讨论】：

当您说页面更改时，您可以在每个页面上添加元属性，将 initial-scale 和 maximum-scale 设置为 1.0 ...这将使页面以 100% 缩放模式加载.
重置视口内容属性会在某些设备上产生一点“闪烁”效果，我只想在必要时这样做（用户已修改缩放级别）。

【解决方案1】：

您可以通过比较 innerWidth 和文档宽度来获取用户缩放级别。文档宽度是以像素为单位的设备宽度，内部宽度是缩放时屏幕上的像素（相对于文档最初的宽度）。我已经在 android（ICS 和 Jellybean）和 iOS（5 和 6）上对此进行了测试，它似乎可以工作。请注意，我没有将视口设置为设备宽度或高度

  ratio = document.width / window.innerWidth

  if ratio > 1 then zommed else notZoomed

然后，您可以在用户双击或捏合时执行此检查。

【讨论】：

它在 Firefox 上不起作用（比率为 NaN），但在 Android 默认浏览器和 iOS 上运行良好。
您需要使用 document.body.clientWidth 而不是不再支持的 document.width
如果视口未设置为设备宽度，则未缩放不会返回 1。因此请谨慎使用此解决方案，并准确检查哪个浏览器返回什么值。

【解决方案2】：

您可以使用javascript设置[meta name="viewport"]标签的内容来设置缩放级别，不幸的是我还没有找到检测当前缩放级别的方法

【讨论】：

我不认为你想用这个来弄乱视口。这意味着用户仍在浏览器中放大，但您正在更改视口以修复它。我猜这很快就会变得非常混乱。最好使用 Khallil Mangalji 的解决方案和 fadomire 的修复。
视口元标记具有最大比例和最小比例属性。更改这些应该将缩放限制为您指定的值。（未经测试，我有一段时间没有做过这种事情了）