Html 比窗口更宽的元素-CSS

当我在智能手机（iPhone）或MacBook上使用Safari浏览器查看我的网站时，我的网站的某些元素比浏览器窗口宽，例如

body

-标签。我已经用开发工具检查了这个网站，它似乎是从600px的宽度开始的。我在Chrome中看不到这个问题

您可以在这里看到一个屏幕截图，看到窗口的宽度为375px，但

body

-标记的宽度为439px

我之所以应用CSS规则，是因为我读到这篇文章应该可以解决问题，但不幸的是，这并不适合我

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这是我正在谈论的网站：

我希望有人能给我一个建议

提前谢谢

我正在桌面上的Firefox上以响应视图进行测试

但是，我发现背景中的云。

x1、.x2等。

导致窗口的宽度比预期的要大。 当云接近其动画的结尾时就是这种情况

一个简单的

溢出：隐藏

到

#页面

执行此任务

我不知道这是否确实导致了你的问题，但无论如何，这可能会有所帮助

---

---

此外，我还建议使用变换平移来移动云，而不是动画中的边距

您可以通过实现引导或将宽度设置为百分比而不是像素大小来轻松解决此问题

Bootstrap为列大小提供了特殊的div类，可以根据屏幕大小进行调整，并且非常容易实现

即

您需要在文档的head标记中实现这一点

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在css中的body标签上给出一个overflow-x:hidden，可能将

display:flex

与

flex wrap

属性一起使用：您需要发布一个最简单的工作示例来复制问题中的问题。向外部站点添加链接是无用的，因为一旦问题解决，问题就会变得模棱两可。请在此处发布您的标记和CSS（复制行为所需的最小数量）。@BenM我想添加一个示例来说明问题，但如果我在JSFIDLE或codepen中添加标记，则问题不会出现。但它仍然在我的网站上。您对我如何复制此问题有何建议？这可能会解决此问题，但我不认为包含2个javascript文件和一个大型框架+无效的html align=“center”适合此问题。很抱歉，当页面较大时，您可以在页面的左右两侧添加2列，使其居中，并将其留空。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>