自10.3以来,HTML图像映射无法在iOS上运行

时间:2017-04-24 13:46:52

标签: html ios uiwebview mobile-safari

所以我有一个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 alt="activity" title="" href="activity" shape="poly" coords="1,389,491,390,447,325,42,325"/>
        <area alt="water" title="" href="water" shape="poly" coords="82,258,41,323,447,325,399,261" />
        <area alt="carbs" title="" href="carbs" shape="poly" coords="122,190,80,257,398,257,352,191" />
        <area alt="vegetables" title="" href="vegetables" shape="poly" coords="123,190,247,191,246,131,161,129" />
        <area alt="fruit" title="" href="fruit" shape="poly" coords="249,191,355,192,317,131,247,131" />
        <area alt="dairy" title="" href="dairy" shape="poly" coords="160,127,243,129,242,65,199,66" />
        <area alt="meat" title="" href="meat" shape="poly" coords="245,130,315,131,271,64,244,65" />
        <area alt="fat" title="" href="fat" shape="poly" coords="217,39,201,64,273,65,258,41" />
        <area alt="rest" title="" href="rest" shape="poly" coords="237,3,220,31,254,31" />
        <area alt="general" title="" href="general" shape="poly" coords="156,25,55,25,55,120,151,120" />
    </map>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

所以我弄清楚我的图片地图代码有什么问题。

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