iphone - 使用 CSS 修复区域 map 以使其在 iPhone 和小型设备上正确显示？

Question

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

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

它在所有桌面浏览器上运行良好，但在 iPhone 或小型设备上查看时，它无法正确对齐。

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

有什么办法可以解决这个问题吗？

非常感谢您的帮助。

Answer 1

对于 <img>标签(最终可能更可取)，您需要像这样设置图像的 % 宽度:

CSS:

img{   
   max-width: 100%;
}

对于 <area><map>元素(在您的情况下)，您需要像这样使用 CSS 转换属性:

CSS(缩小 50%):

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

要使页面的其余部分也适当缩放，您可能还必须设置另一个 <div>容器到 % 宽度。

只需调整浏览器窗口的宽度，您就可以在笔记本电脑上对手机尺寸进行快速而粗略的测试。如果您的内容在最小宽度下仍然适合 View ，那么您的状态很好，至少在手机水平放置时是这样。