允许在 iOS 和 Android 设备上放大和缩小答案

【问题标题】：Allow for zoom in and out on iOS and Android devices允许在 iOS 和 Android 设备上放大和缩小
【发布时间】：2021-08-02 09:21:59
【问题描述】：

我目前正在开发一个网页响应式网站，但在 Android 设备上放大和缩小时遇到问题。

尽管它是一个响应式应用，但我想支持捏合和拉出功能以放大某些图像。

在 nuxt.js 配置文件的 meta 中，有

{ 
  name: 'viewport', 
  content: 'width=device-width, 
  initial-scale=1, 
  minimum-scale=1, 
  user-scalable=no, 
  viewport-fit=cover'
}

在some research 之后，我发现user-scalable=no 可以禁用放大和缩小。

当我在 iOS 设备上测试并使用 Safari 和 Chrome 时，我可以通过捏合/拉出操作放大和缩小图像（这很完美，但不知道为什么......），但是我无法缩放在 Android 设备上进行测试时进出。

所以我的问题是

【问题讨论】：

【解决方案1】：

这篇文章应该有几个关于如何在 iOS 设备上禁用缩放的答案：Disable Auto Zoom in Input "Text" tag - Safari on iPhone
最常见的技巧可能是

font-size: 16px;

至于行为差异的原因，这可能是因为我们确实有一些属性适用于 Android 设备，而不适用于 iOS 设备。与某些浏览器的差异一样，想想过去修补 IE 以使其看起来像其他浏览器的美好时光。在这里，坏男孩可能是 iOS，因此，它需要一些额外的配置。

关于你的问题，如果你想在Android设备上启用缩放，为什么不删除user-scalable=no？ nuxt.config.js 文件的默认头是这样的

export default {
  head: {
    meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
  }
}

这里没有缩放禁用设置，因此它可以在任何设备上正常缩放。不是吗？

【讨论】：

非常感谢亲！通过删除 user-scalable=no，我终于能够在 Android 设备上使用缩放功能。然而，这让我想到了一个不同的问题。它会自动放大iOS设备（包括输入文本和整个网页等）......我只想在用户点击图像和用户放大图像后使用捏合功能。所以我认为我应该将 user-scalable 设置为 no 以禁用自动缩放，但不知何故，我需要仅在用户点击图像时启用捏合功能...
您的问题与这里的 iOS 设备有关，因此，我链接的文章是关于这个确切的问题（在表单上）。在这里，您想禁用 iOS 的默认自动缩放，同时保留缩放功能。我建议不要删除 user-scalable=no，因为这不能是动态的，而且您的目标是允许最终用户缩放。