HTML缩放在iPhone Safari iOS 13上的可点击区域标签

Question

我们有一个使用“地图”和“区域”标签的网站。它是通过将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

Answer 1

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

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

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

图像映射不响应（响应式图像映射）并没有帮助，因此不确定使用视口元值是否有帮助。

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