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

Question

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

它在所有桌面浏览器上都可以正常工作，但在 iPhone 或小型设备上查看时，它无法正确对齐。

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

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

我非常感谢您的帮助。

score 0 · Accepted Answer

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

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

1 回答 1