移动网站 html 元素太宽

Question

我正在设计我的网站的移动版本，它应该类似于移动应用程序。

问题是我的移动浏览器中的 html 元素有一个奇怪的宽度。我尝试将 body 和 html 设置为 width:480px;并且内容是 480 像素，但即便如此，内容旁边也有很多空白（估计约为 300 像素）。这样做的效果也是网站不是放大到内容而是放大到内容+空白，您首先必须放大才能正确使用网站。

当然我想用 width:100%;所以它在不同的屏幕尺寸上都能很好地呈现。

有谁知道发生了什么或如何解决它？

编辑 html代码只是简单的xhtml过渡，没什么特别的。在我的 css 中：

body, html {
width:480px !important;}

但是，如果我不为那些设置宽度，它应该可以正常工作吗？我也没有为任何其他元素设置宽度（除了像按钮 100px 和类似的东西），如果我在我的电脑上查看移动版本，没有元素似乎比 body 更宽。

Answer 1

您是否添加了viewport 元标记？

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