Question

当我在智能手机（iPhone）或MacBook上使用Safari浏览器检查我的网站时，我的网站的某些元素比浏览器窗口更宽，例如body - 标记。我用dev-tool检查了网站，似乎它的宽度为600px，位于下方。我在Chrome中没有看到这个问题。

您可以在此处看到屏幕截图，并看到窗口的宽度为375px，但body - 标签的宽度为439px。

我正在应用这个CSS规则，因为我读到这应该可以解决问题，但不幸的是，这不适合我。

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

以下是我所谈论的网站：http://www.firma-info.no

我希望有人对我有建议。

提前致谢！

Answer 1

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

但是，我发现背景中的云。x1, .x2 etc.导致窗口的宽度大于预期。当云在他们的动画结束时就是这种情况。

overflow: hidden;只需#page完成工作。

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

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

Answer 2

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

Bootstrap具有特殊的div类，用于根据屏幕大小调整列大小，并且非常容易实现

即

$headers = array(
        'Accept:vdn.v1'

    );

您需要在文档的head标记中实现此功能

<div class="col-xs-2 col-sm-2"></div>
            <div class="col-sm-8 col-xs-12" align="center" id="content">

Answer 3

在css

的body标签上隐藏一个overflow-x：