使用 CSS 修复区域地图，使其在 iPhone 和小型设备上正确显示

Question

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

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

它

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

这主要是因为具有版权信息和社交图标的图像是基于 #map 的，因此它是1200px的图像。

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

我非常感谢您的帮助。

Answer 1

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

.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>容器设置为 % 宽度。

您只需调整浏览器窗口的宽度，就可以在笔记本电脑上对手机尺寸进行快速而肮脏的测试。如果您的内容仍然适合最小宽度的视图，那么您的状态良好，至少在水平握持手机的情况下。