移动网站未正确显示

Question

所以我遇到一个问题，我的网站右侧有很多填充，导致布局加载错误。调整窗口大小时，它在我的桌面上正确显示，但在手机上查看时，除标题之外的所有内容都会中断。所有相关的div都设置为480px的宽度，我的标题中有以下标记用于媒体查询：

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

以下是它在桌面和移动设备上的显示方式的屏幕截图，以及指向我的移动css页面的链接（菜单在移动设备上打开，但额外空间似乎也会影响它。）

CSS Page

编辑：我现在有一个稍微不同的问题，其中边距已添加到屏幕的整个右侧。我将许多div的像素宽度更改为100％，并将<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">标记添加到标题中。虽然它们无法再缩小，但您只需水平滚动屏幕即可找到填充。我的font-face标签也有问题，它不再加载标题字体。我更新了css文件，希望这能说明为什么它不再起作用了。

此外，这是指向实际网站的链接：Link

Answer 1

你不应该在这里设置明确的宽度，（至少不是以像素为单位），并且从简短的一瞥看你发布的内容我想象你的问题就在哪里。

首先，取消你为任何你想要的“全宽”设置的宽度 - 记住div无论如何都是块级元素，所以如果你没有设置宽度，他们会宽度为100％。

其次，取消您正在设置的任何其他像素宽度，并将其更改为百分比。

第三，如果你将'box-sizing'设置为'border-box'，你会给自己省去很多麻烦（为了简单起见，我建议只在'*'上做）。这样可以防止将填充和边距添加到您设置为百分比的任何宽度之上;它们将被包含在盒子大小中。

最后，我无法强调摆脱“移动”和“桌面”之类的思维方式的重要性。我们在这里讨论的是不同的视口大小。 :)

如果你有一个实时链接，你可以分享我很高兴看到这个。

Answer 2

将以下内容添加到.css文件中：

img{max-width:100% !important}