如何在 Android 上使用“viewport-fit=cover”和“maximum-scale=1”而不禁用缩放

Question

我一直在我的网站上使用以下视口

meta

标签：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />

在 iPhone 上，这给了我我想要的确切行为：

• maximum-scale=1

  阻止 Safari 在文本字段聚焦时放大

• viewport-fit=cover

  删除了 iPhone X 横向模式下 Safari 的左右内边距，因此背景颜色和图像一直延伸到边缘
• 用户仍然可以根据需要手动进行捏合缩放，因为 iOS 始终允许这样做，无论

  meta

  标签中的任何属性如何，否则会禁用它

但在 Android 上，

maximum-scale=1

和

viewport-fit=cover

完全阻止缩放，我发现避免这种情况的唯一方法就是删除这两个属性。但随后我也失去了将它们包含在 iPhone 上的好处。

有什么方法可以将这两个属性保留在我的

meta

标签中，但 also 仍然允许在 Android 上手动捏合缩放？

Answer 1

您应该能够通过将最大比例修改为至少高于 3.0 来实现您想要的目标。将其设置为最大值 1 不允许进行任何放大。

根据我的理解，最大比例与放大有关，最小比例与缩小有关。