Question

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

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

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

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

我非常感谢你的帮助。

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

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