Question

我大学的主管要求我更新她的网站，我发现当我缩小浏览器时，会出现一个水平滚动条，但网站的右侧被背景覆盖了。如果我在手机上打开网站，则右边不见了。我至少想用较小的浏览器大小解决此问题。

我没有很多html经验；我只是要更新信息。我不知道是谁为网站编写了代码，但想为我的主管解决该问题。

我查看了代码，但不知道问题出在哪里。我已经尝试了一些在stackoverflow上发布的解决方案，以解决看似相似的问题，但没有任何效果。

我想知道是否有人可以查看代码并潜在地确定问题？这是网站：https://people.trentu.ca/~joannafreeland/index.html

提前谢谢！

玛丽亚

Answer 1

尝试将其放在您的代码的<head>中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">

width =设备宽度 就是说，我们告诉浏览器“我的网站适应您的设备宽度”。这意味着浏览器将（可能）以其自身屏幕的宽度呈现页面的宽度。

初始比例属性控制页面首次加载时的缩放级别。最大比例，最小比例和用户可缩放属性控制如何允许用户放大或缩小页面。

Answer 2

或尝试以下操作：

@media screen (max-width:400px) {
}

将此内容写在CSS上，并且可以在大括号之间编写代码。该代码仅在屏幕宽度小于400px时才处于活动状态。

Answer 3

这不会使您的页面完全响应，但是也许您可以尝试添加

width: 100%;

在您的html下的规则中，正文？

这应该有助于解决中断问题。希望这可以帮助？

EnhancedLoop7