在移动设备上显示网站时，页面被放大了。

Question

我创建了这个网页（链接），但在移动设备上查看时，它的显示效果如图（链接）所示。

如果我缩小页面，则所有内容都可以看到。然而，我希望它在最初加载时就是这样，而不是让用户手动缩小页面。

我尝试了多种方法，例如：

• 更改边距
• 更改网格列大小
• 确保没有设置宽度值，只使用百分比

我还添加了：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

我无法弄清楚它为什么会这样。

如果您有任何建议，请告诉我。

- Yumna

---

在继续之前，我发现你的CSS中有一个错误：在480像素的媒体查询中，在position:relative;后面缺少了一个分号（在你的CSS中只有position:relative）。 - Rachel Gallen

问题在于你的.m-intro元素内的8em填充。删除或更改它，你就会看到变化。没有任何放大 - 只是因为这个元素而被拉伸了。 - nemanja

谢谢你们两位的建议。我会进行修改。 - Yumna

@Rachelle，一些手机比480像素更窄，例如iPhone（旧版320，新版375/414...低于480仍不能良好显示）。也许可以调查一下。Screenfly是一个很好的测试网站显示效果的工具。 - Rachel Gallen

Answer 1

元素溢出是因为其填充值以像素为单位固定。将.m-intro中的填充替换为百分比值，这样它将取决于容器的大小：

.m-intro {
    padding: 10%;
}

- Maarti