iPhone Safari iOS 13上的html缩放中的可点击区域标签答案

【问题标题】：Clickable area tag in html zooming on iPhone Safari iOS 13iPhone Safari iOS 13上的html缩放中的可点击区域标签
【发布时间】：2020-03-07 09:14:33
【问题描述】：

我们有一个使用“地图”和“区域”标签的网站。它是通过将 Excel 电子表格保存为“htm”格式生成的，主要在 iPhone 上的 Safari 中查看。这些标签使用户能够单击一个页面的一部分并将其带到另一个页面。

最近似乎有一个更改/更新，如果触摸可点击区域，Safari 会缩放。

代码示例：

<map name="MicrosoftOfficeMap3">
  <area shape="Rect" coords="0, 0, 150, 117" href="sheet004.htm#Range!A1">
</map>

如果您快速触摸该区域，它将跟随链接。但是，如果您的手指在该区域停留几毫秒，则会导致页面缩放不便。

有没有人遇到过这种情况，您是否找到了禁用缩放的方法？我用 CSS 中的视口和“body”缩放设置尝试了很多东西。

如果您使用的是 iOS 13，您可能会看到此示例中的行为 - 触摸青蛙图像上的蓝色方块：https://www.csmckee.com/dashboard_internal/frog.htm

【问题讨论】：

【解决方案1】：

我认为这是 iOS 13 中引入的一个错误，由删除 3D Touch 代码并将其替换为 Haptic Toutch 引起的。

注意页面底部的工作表链接也如何从页面“分离”并略微放大...这似乎是打开预览弹出窗口之前链接的行为。

HTML 地图区域本质上是链接，因此 Safari 可能会感到困惑并缩放整个图像。

图像映射没有响应 (Responsive image map) 并没有帮助，因此不确定使用视口元值是否有帮助。

也许在 iframe 中打开 URL？我注意到 iframe 场景中 Haptic Touch 行为的细微差别。

【讨论】：

感谢尼尔森的帮助。我将尝试 iframe 方法并检查行为。我同意你的想法，这很可能是从 3D 触摸切换到触觉。如果 iframe 对我有用，我会选择你的答案。
我尝试使用 iframe，但这似乎没有帮助 csmckee.com/dashboard_internal/frog_iframe.html
你是对的。很抱歉为您指明了错误的方向。昨天我尝试了一个类似这样的sn-p：codepen.io/nantunes/full/NWWOVXe，并且行为有些不同......所以它必须是codepen.io网站的标题或样式中的东西。
好吧，我明白了为什么我的错误假设：顶部 html 有一个 <meta name="viewport" content="width=device-width, initial-scale=1"> 覆盖了 iframe 内的那个。所以基本上我发现了你已经做过的同样的事情：除 1 之外的任何比例都会导致问题。祝你好运！

【解决方案2】：

您可以在不禁用用户捏缩放功能的情况下阻止 Safari 自动放大。只需添加 maximum-scale=1 但忽略 user-scale 属性：

像这样：

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

如果您的网站是为移动设备设计的，您可以通过添加 user-scalable=0 来决定不允许缩放

【讨论】：

感谢 Mojtaba - 我尝试了这些方法。将比例设置为锁定的“1”似乎确实可以防止触摸时缩放，但是我们需要将其缩放到 0.7。似乎任何缩放到 1 以外的任何网站都有这种问题行为。