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

Question

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

5

我们有一个网站，使用"map"和"area"标签。它是通过将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，你可以在这个例子中看到这种行为 - 点击青蛙图片上的蓝色正方形：https://www.csmckee.com/dashboard_internal/frog.htm。

- Lenny

和一位开发者聊过后，我们认为这可能与iOS v13有关 - 在iOS v12上似乎没有出现。 - Lenny

请把你给我展示的视频链接发给我。 - David Bradshaw

@DavidBradshaw 完成了 - 我刚刚添加了视频的链接。 - Lenny

也许值得查看 https://webkit.org/reporting-bugs/ - David Bradshaw

2个回答

2

您可以通过添加 maximum-scale=1 以防止Safari自动缩放，而不会禁用用户的捏合缩放功能。请忽略用户比例尺属性:

像这样:

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

如果你的网站已经为移动设备进行了正确的设计，你可以通过添加user-scalable=0来决定不允许缩放。

- Mojtaba Hosseini

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nelson Antunes · Accepted Answer

我认为这是iOS 13中引入的一个错误，由于删除了3D Touch代码并用触觉Touch进行了替换而引起的。请注意页面底部的链接也会被“解除连接”并略微放大... 这似乎是在打开预览弹出窗口之前链接的行为。HTML地图区域本质上就是链接，所以Safari可能会感到困惑，进而缩放整个图像。不帮助的是，图像映射不是响应式的(响应式图像映射)，所以不确定调整视口meta值是否有帮助。也许在iframe中打开网址？我注意到在iframe场景中，触觉Touch的行为有细微的差异。