2017-04-24 52 views
3

所以我有一個UIWebView的應用程序,基本上包含帶圖像映射的圖像作爲自定義導航的一種形式。直到iOS 10.2.x這個工作正常,但自10.3.1以來,我的用戶一直在報告說,單擊圖像映射扇區不再工作。HTML圖像地圖不適用於iOS,因爲10.3

我已經在應用程序中測試了這個以及iOS Safari中的HTML文件,並且似乎確實圖像映射不再有效。它在Mac上仍然可以在Safari上運行,但對我來說這沒用。

其他圖像地圖工作,例如this w3schools上的圖像地圖。我的怎麼了?

我可以做什麼改變,使圖像地圖再次工作?

這是我使用的圖像映射的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> 
+0

我能想到的唯一選擇是html5的[canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)。 – Pyromonk

回答

1

所以我想通了,什麼是錯的我的圖像映射代碼。

如果您查看原始文章中包含的代碼,您會看到我的usemap爲#m_trianglemap,而地圖名稱爲m_triangleMap,基本上只是不同的套管。在10.3.1之前的所有其他瀏覽器和Safari iOS上,usemap不區分大小寫。現在它是區分大小寫的。一旦我改變了usemap的值來匹配大小寫中的名字,它就再次開始工作。