时间戳

首页 > 解决方案 > iPhone Safari iOS 13上的html缩放中的可点击区域标签

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

问题描述

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

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

代码示例：

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

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

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

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

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

标签： htmlioscsssafari

解决方案

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

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

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

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

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

推荐阅读