Wordpress html 元素在移动设备上的宽度为 100%

Question

我试图让我的 wordpress 网站始终以 100% 宽度显示。我的 wordpress-css 没有手机专用 css。当我在移动设备上访问该网站时，该网站不再是 100% 宽度，尽管 css 说它应该是。我目前正在 css 中测试内容，因此不会链接该网站。

编辑：我现在尝试删除整个 css 中的所有 width-specifications，css 中的任何地方都不存在单词 "width"。 html 仍然精确锁定到 320 像素，与 iPhone4 指定的宽度相同。这可能是 wordpress 的问题，而不是 css 文件。

真正奇怪的是，如果我放大 window，然后再缩小，看起来应该是：

这是css:

body, html {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
    color: #333; 
    min-width: 100%;
    margin: auto;
}

我的 html 顶部有 viewport-thing:

<meta name="viewport" content="width=device-width">

但是我无法将 "initial-scale=1" 添加到 wordpress html 中。从我读到的内容来看，我怀疑这就是问题所在。

有什么错误的建议吗？作为旁注：它在实际移动设备上也无法显示 100% 宽度，这不仅仅是 chrome 设备模拟器失败。

一个提示可能是即使 wordpress 本身也会错误判断屏幕的宽度，正如 wordpress header 未填充 100%

所见

Answer 1

应rsn的要求，我将我们的讨论总结为一个答案。感谢 rsn 和其他发现问题的人！

在这种情况下，宽度本身设置正确。问题是东西移动到 100% 宽度之外，站点试图缩小所有内容以适应移动到 100% 宽度之外的东西。这导致其他一切都按比例缩小，包括我认为是一个完全不同的问题的文本字体大小。所以，在指定之后：

.img {
    max-width: 100%;
}

网站运行良好。除了最后一个细节，我还有一个很长的 link，尽管有 word-wrap: break-word，但最终比宽度还宽。为了解决这个问题，我添加了：

.long-link {
    word-break: break-all;
}

现在没有任何东西超出 100% 宽度，一切正常。

Wordpress html 元素在移动设备上的宽度为 100%

Wordpress html element 100% width on mobile

html

css

wordpress

mobile

width