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

Question

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

最近似乎有一项更改/更新会导致 Safari 在触摸可点击区域时进行缩放。

代码示例:

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

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

有没有人经历过这种情况，并且您找到了禁用缩放的方法吗？我已经尝试了很多使用 CSS 中的视口(viewport)和“body”缩放设置的方法。

以下是显示该行为的视频链接:https://www.csmckee.com/dashboard_internal/Video.mov

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

Answer 1

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

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

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

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

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