使用CSS修复区域地图，以便在iPhones和小型设备上正确显示？

Question

这是我为客户制作的网站的链接：

http://knowyourheart.co.uk/alisir/diff/

它在所有桌面浏览器上都工作得很好，但是当在iPhone或小型设备上查看时，它不能正确对齐。

这主要是因为有版权信息和社交图标的图片是基于#map的，所以它是一个1200px的图片。

有什么办法可以绕过这个问题吗？

我真的很感谢你的帮助。

Answer 1

对于<img>标记(最终可能更可取)，您需要设置图像的% width，如下所示：

CSS：

img{   
   max-width: 100%;
}

对于<area><map>元素(在您的示例中)，需要使用CSS transform属性，如下所示：

CSS (小50% )：

area {
   zoom:.5; 
  -webkit-transform: scale(.5);  /* iPhone Safari browser specific */
  -o-transform: scale(.5);
  -moz-transform: scale(.5)"
}

要让页面的其余部分也适当缩放，可能还必须将其他<div>容器设置为% width。

只需调整浏览器窗口的宽度，就可以在笔记本电脑上快速测试手机的大小。如果你的内容仍然适合最小宽度的视图，那么你的状态很好，至少如果手机水平拿着的话。