图像映射在 iOS 设备上不起作用，大图像会被设备重新缩放

Posted 2023-05-08

【中文标题】图像映射在 iOS 设备上不起作用，大图像会被设备重新缩放

【英文标题】：image map not working on iOS devices, with large images that get rescaled by the device

【发布时间】：2011-09-30 01:25:40

【问题描述】：

我正在使用 php 在我们公司的 Intranet 上开发一个内部 Web 应用程序。该应用程序的一个部分向用户显示了几张高分辨率图像。这些图像在 5000x3500 像素的区域内。每个图像都有一个图像映射（使用矩形区域），并且在我尝试过的桌面浏览器中一切正常。

我发现的问题是，当用户通过他们的 ios 设备访问该网站时，设备上的 safari 正在重新调整图像，但是图像地图坐标没有被调整以匹配。

我的 PHP 生成的 html 示例如下：

<img src="largeimage.jpg"   usemap="#examplemap">
<map name="examplemap">
  <area shape="rect" coords="0,0,5000,500" href="blah1"/>
  <area shape="rect" coords="0,500,2500,3500" href="blah2"/>
  <area shape="rect" coords="2500,500,5000,3500" href="blah3"/>
</map>

（图像地图中的实际矩形坐标以图像大小的百分比计算）。

我知道由于设备上的内存限制，safari 正在调整图像大小，但我需要找到一种方法来缩放图像映射以适应，或者用其他可以完成相同工作的东西替换图像映射。谁能给点建议？

【问题讨论】：

我实际上正在经历同样的事情。你认为这是一个已知的错误吗？我不知道它是否有帮助，但在 iPhone 上，当我持有风景风格时，我的地图可以正常工作。尝试加载页面纵向样式会破坏地图。无论哪种风格，向相反方向旋转也会破坏它。

开始赏金来获得这个。我什至尝试过 - 我不知道该怎么做。

用php重新缩放图像是一种选择吗？

在黑暗中有点刺，但是将 添加到您的 中是否有帮助？

@TheBlackBenzKid 这不是错误，而是 Mobile Safari 中的 documented limitation。

【参考方案1】：

这个话题在 *** 上解决了：jquery-image-map-alternative

最好的办法是使用绝对定位的锚点（也如 steveax 所建议的那样）而不是 imagemap。

更新

由于这是一个老问题，您现在可以考虑使用 SVG 地图。它们在所有现代浏览器中都受支持，响应式工作并且与图像地图一样易于使用。 （感谢用户 vladkras 的提醒）

【讨论】：

欣赏文章链接和cmets+repped。

文章链接到多个来源。我认为这种组合很好，因为它取决于客户/场景。我还会考虑 HTML5 画布 - 在图像周围映射画布线，并在画布元素上有链接。

这个链接最好的部分是未被注意到的未投票的answer 以及关于SVG 的文章

【参考方案2】：

您为什么不改用响应式图像地图。这样，您仍然可以将多边形贴图用于形状奇特的物品。

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

就像添加脚本一样简单。还有一行javascript：

$('img[usemap]').rwdImageMaps();

【讨论】：

这仅适用于根据屏幕大小调整坐标大小。它不能在触摸设备上工作。

它对我来说真的很好用。我在同一条船上。我需要带有地图的大型桌面图像来缩放图像地图以及移动 safari 和移动 chrome 中的 safari 图像缩放。添加了 rwd，它们工作得很好。

此方法不适用于 iOS 版 chrome。它正在运行 safari mobile 和 chrome for android。我最终退回到绝对定位锚元素，其定位和大小的百分比值。

@Shwaydogg 它可能无法在适用于 iOS 的 chrome 上运行，因为您没有将 img 标签的“宽度”和“高度”属性显式设置为图像的原生宽度/高度，然后使用CSS 来设置你想要的实际宽度/高度。这就是我的问题。

【参考方案3】：

内森的评论是正确的。您需要修复视口以防止缩放。基本上，要么指定一个固定的像素宽度，要么将比例设置为 1.0 并设置 user-scalable=no

请参阅此文档以供参考：

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

使用区域标签的另一种方法是使用带有事件 x/y 和边界的 javascript 作为您的命中区域。

【讨论】：

我实际上只是将 PSD 创建为表格 - 使这些单元格链接图像并以这种方式完成。还将 display:block 和 border-collaspe 添加到表格单元格 - 而不是地图。我尝试了所有这些，但没有运气。我会推荐这个供其他人使用：econsultancy.com/uk/blog/…

FWIW 这对我有用：<meta name="viewport" content="user-scalable=no, width=1000" />（我的页面宽度是 1000px）

【参考方案4】：

我最近在一个项目中遇到了这个限制，我们需要能够缩放，这就是我为解决这个问题所做的：

将图像分成 4 个象限

将 4 张图片放入 div 中，width 和 height 设置为 50% 和 position: absolute;

绝对定位<a> 元素在象限的父元素中使用 百分比值和高z-index

像这样：

CSS

#map-frame  position: relative; 
.map 
    display: block;
    position: absolute;
    width: 5%;
    height: 3%;
    z-index: 99;

.q 
    position: absolute;
    width: 50%;
    height: 50%;

.q img 
    display: block;
    max-width: 100%;

.q1 
    top: 0;
    left: 0;

.q2 
    top: 0;
    right: 0;

.q3 
    bottom: 0;
    left: 0;

.q4 
    bottom: 0;
    right: 0;

HTML

<div id="map-frame">
    <a class="map" href="foo.html" style="top: 20%; left: 20%;">
    <a class="map" href="foo.html" style="top: 40%; left: 20%;">
    <a class="map" href="foo.html" style="top: 20%; left: 40%;">
    <a class="map" href="foo.html" style="top: 40%; left: 40%;">
    <div id="q1" class="q">
        <img  src="q1.jpg" />
    </div>
    <div id="q2" class="q">
        <img  src="q2.jpg" />
    </div>
    <div id="q3" class="q">
        <img  src="q3.jpg" />
    </div>
    <div id="q4" class="q">
        <img  src="q4.jpg" />
    </div>
</div>

【参考方案5】：

将所有内容放在一个表中。设置为 100% 宽度。 iphone 似乎没有缩放表格......我正在努力解决这个问题，因为我的图像只是丢失了，或者在一个 div 中。 没有一个矩形坐标链接工作。但是当我把所有东西都放在一张桌子里时......好吧，试试看吧:)

【参考方案6】：

我挖掘了这篇文章，因为我刚刚找到了一个让图像映射在 iOS 上工作的解决方案。

将您的地图放在一个锚点内并在其上监听点击/点击事件，以检查目标元素是否与地图的区域匹配。

HTML

<a id="areas" href="#">
    <img src="example.jpg" usemap="#mymap"  >
    <map name="mymap">
        <area id="area1" shape="poly" coords="X1,Y1,X2,Y2...">
        <area id="area2" shape="poly" coords="X1,Y1,X2,Y2...">
        <area id="area3" shape="poly" coords="X1,Y1,X2,Y2...">
    </map>
</a>

JAVASCRIPT

$("#areas").on("click tap", function (evt) 
    evt.preventDefault();
    if (evt.target.tagName.toLowerCase() == "area") 
        console.log("Shape " + evt.target.id.replace("area", "") + " clicked!");
    
);

在 iPad4 上使用移动 safari 6.0 测试

【参考方案7】：

不要使用 Default <img usemap="#map"> 和 <map name="map"> 更改它。喜欢<img usemap="#mapLink"> 和<map name="mapLink">。它正在工作！！！

【讨论】：

有什么区别？

【参考方案8】：

在usemap 属性中简单地使用# 似乎可以解决iPhone 上的问题。

例如<img usemap="#mapLink"> 和<map name="mapLink">

【参考方案9】：

我的解决方案很简单。我刚刚在 DIV 的 css 中分配了一个高度和宽度以匹配图像的大小，一切正常。原始图像尺寸为 825 x 1068，所以

    <div style= width: 825px; height: 1068px;">
    ...
    </div>

希望对你有帮助。

【参考方案10】：

我只用 1 行代码解决了这个问题，没有 JavaScript。只有 CSS，你需要使用 zoom 属性来缩放你的图像，一切都会正常，就像这样

img 
    zoom: 0.3;

【参考方案11】：

<img src="largeimage.jpg"   usemap="#examplemap">
<map name="examplemap">
  <area shape="rect" coords="0,0,100%,10%" href="blah1"/>
  <area shape="rect" coords="0,10%,50%,70%" href="blah2"/>
  <area shape="rect" coords="50%,10%,100%,70%" href="blah3"/>
</map>

请尝试在坐标内使用百分比值

【讨论】：

coords中的值需要表达as CSS pixels

@steveax 就在这里，因为我尝试使用百分比 - 它不起作用。