css - 移动浏览器窗口中的网页超宽

Question

我创建了以下网页：

问题是在我的 Lumia、UC 浏览器和 Edge 中，文本很小。（事实上，一切都变得很小。我必须放大才能阅读任何内容。）

这是我的 CSS 代码的问题吗？或者，移动浏览器是否错误地报告了设备的屏幕尺寸？我编写了一些媒体查询，以根据屏幕大小（以 em 为单位）呈现略有不同的样式，但未检测到最低尺寸。

如果问题出在网页上，我想解决这个问题，但我不知道如何判断是网页的问题，还是问题所在。

请帮忙！

score 3 · Accepted Answer

尝试将以下内容添加到您的<head>：

<meta name="viewport" content="width=device-width, initial-scale=1">

您将面临的下一个问题是您对表格的使用。这些将导致页面布局更宽，因为它们不换行。您可以做的是将这些放在一个响应式包装器中，该包装器将滚动任何额外的溢出：

<div class="scroll-overflow">
    <table>...</table>
</div>

div.scroll-overflow {
    overflow-x: scroll;
}

最后，您正在网站底部加载完整的 728x90 广告。这也将导致整体布局非常宽，因此在屏幕上显示得更小。

您应该在此处放置更窄的广告，或者使用 CSS 限制广告宽度。通过这些小改动，您的网站立即变得对移动用户更加友好。

这是之前（左）和之后（右）。

1 回答 1