移动设备上的错误内容宽度答案

【问题标题】：Bad content width on mobile devices移动设备上的错误内容宽度
【发布时间】：2013-08-02 02:09:44
【问题描述】：

我在 wordpress 中有网站，但我在内容上有一个小问题。在计算机上主要内容显示正常。正如您在移动设备上看到的那样，内容大约有。 50% 的宽度，我不知道为什么.. 有人可以帮帮我吗？

非常感谢

编辑：现在我看到变音符号在移动设备上也不起作用......（ščťžýá 等......）

【问题讨论】：

内容下方的水平线表示您有一个宽度远大于实际内容的容器。移动设备上的网页适合屏幕，因此会显示整个容器。
嗯...你能告诉我如何解决这个问题吗？
是的，但我需要你先回答这个问题。它是 wordpress，那么您是使用他们的模板之一还是您自己编写的？如果是他们的模板之一，你至少对 html 和 css 有基本的了解吗？您是否有权访问代码来更改它？我从来没有使用过 wordpress，所以如果他们让你更改他们的模板，我会很高兴
我写了我的模板。是的，我了解 html/css。我当然可以访问 ftp。

【解决方案1】：

确保您在文档的<head> 中设置了一个适合移动浏览器的视口。

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

【讨论】：

【解决方案2】：

问题在于您在网站上的包装。如果您查看屏幕截图，有一条水平线延伸到实际内容之外，这意味着您的包装器或容器太大。尝试在包装器上使用 max-width: n px;。如果这不起作用，请尝试媒体查询。

例如在你的 css 中：

@media screen and (max-width: 600px) {

    #wrapper {width: n px;}

}

如果屏幕宽度>= 600px，更新这些样式。

这将位于包装器样式的下方。如果你确实走这条路，你会想要实现 Vector 用额外的元标记回答的内容。它基本上告诉文档有媒体查询。

【讨论】：