自 10.3 起,HTML 图像映射在 iOS 上不起作用

Posted

技术标签:

【中文标题】自 10.3 起,HTML 图像映射在 iOS 上不起作用【英文标题】:HTML Image maps not working on iOS since 10.3 【发布时间】:2017-04-24 13:46:51 【问题描述】:

所以我有一个带有 UIWebView 的应用程序,它基本上包含一个带有图像映射的图像作为自定义导航的一种形式。在 ios 10.2.x 之前,这一切正常,但从 10.3.1 开始,我的用户一直报告说单击图像地图扇区不再起作用。

我已经在应用程序内部以及 iOS Safari 中的 html 文件中对此进行了测试,图像映射似乎不再起作用。它仍然可以在 Mac 上的 Safari 中使用,但这对我来说没用。

其他图像映射也可以使用,例如 w3schools 上的 this 图像映射。我的怎么了?

我可以进行任何更改以使图像映射再次起作用吗?

这是我用于图像映射的 HTML:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, shrink-to-fit=YES">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
</head>
<body>
    <p>
        <img name="triangle" src="triangle.png" usemap="#m_trianglemap" />
    </p>
    <map name="m_triangleMap">
        <area  title="" href="activity" shape="poly" coords="1,389,491,390,447,325,42,325"/>
        <area  title="" href="water" shape="poly" coords="82,258,41,323,447,325,399,261" />
        <area  title="" href="carbs" shape="poly" coords="122,190,80,257,398,257,352,191" />
        <area  title="" href="vegetables" shape="poly" coords="123,190,247,191,246,131,161,129" />
        <area  title="" href="fruit" shape="poly" coords="249,191,355,192,317,131,247,131" />
        <area  title="" href="dairy" shape="poly" coords="160,127,243,129,242,65,199,66" />
        <area  title="" href="meat" shape="poly" coords="245,130,315,131,271,64,244,65" />
        <area  title="" href="fat" shape="poly" coords="217,39,201,64,273,65,258,41" />
        <area  title="" href="rest" shape="poly" coords="237,3,220,31,254,31" />
        <area  title="" href="general" shape="poly" coords="156,25,55,25,55,120,151,120" />
    </map>
</body>
</html>

【问题讨论】:

我能想到的唯一选择是html5的canvas。 【参考方案1】:

所以我发现我的图像映射代码出了什么问题。

如果您查看原始帖子中包含的代码,您会看到我的使用地图是#m_trianglemap,而地图名称是m_triangleMap,基本上只是大小写不同。在 10.3.1 之前的所有其他浏览器和 Safari iOS 上,usemap 不区分大小写。现在它区分大小写。一旦我更改了 usemap 值以匹配大小写中的名称,它就会再次开始工作。

【讨论】:

以上是关于自 10.3 起,HTML 图像映射在 iOS 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

iOS10.3 起,将支持应用内评分

Xcode 8.3 Swift 3 FCM 通知上的 Firebase 问题 iOS 10.3 不起作用

iOS 10.3下解决Fiddler代理抓包ssl证书信任问题

iOS 10.3 WKWebView 访问照片库时崩溃

iOS 应用程序卡在 iOS 10.3 上的 Launch Image

iOS 10.3 中的 WebView 字体不正确