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

Question

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

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

在 nuxt.js 配置文件的元数据中，有

{ 
  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 时，我可以通过捏合 in/out 动作放大和缩小图像（这很完美，但不确定为什么。 ..)，但是，当我在 Android 设备上测试时，我无法放大和缩小。

所以我的问题是

Answer 1

这个 post 应该有几个关于如何在 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' }],
  }
}

此处没有缩放禁用设置，因此在任何设备上缩放都可以正常工作。不是吗？

Allow for zoom in and out on iOS and Android devices