移动响应页面未达到全宽

Question

我正在为客户设计响应式设计，而我遇到的问题是页面右侧有一些不必要的填充/边距空间，我似乎无法理解摆脱。

我已经检查了所有元素和样式，并且看起来没有任何可能导致此问题的内容。我已经获得了元标记标题。

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

我使用jQuery和@media进行响应。

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 1)
and (orientation: portrait) 
{

以下是网址http://www.smcelectric.com/smc/

我正在使用Chrome＆＃34;设备模式＆＃34;查看它，以及在我的手机上使用它。

欢迎提供额外内容的任何建议或要求。 谢谢！

您会注意到右侧有一些随机空间。

这是Chrome开发工具中的一个镜头，我突出显示了html标签。 Highlighted HTML Tag Screen Capture  如果您看到代码中没有挤出元素。我已经检查了.wrapper以及许多其他元素，以确保视口不会出现任何问题。也许我错过了一个超越视口的元素？我不在平板显示器上工作，只是现在的移动显示器。

Answer 1

如果你是在讲述这个问题：

原因是，您的内容溢出了视口。只是想知道是否是这种情况，那么你可能需要以不同的方式处理它，因为你的孩子：

.wrapper {
    margin: 0 auto;
    width: 1000px;
}

具有大于视口的固定宽度。这应该是100%。此外，最好提供所有图像，最大宽度为100%：

img {max-width: 100%;}