移动响应页面未占满宽度

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 的“设备模式”视图来检查它，以及在我的手机上使用它。

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

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

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

Answer 1

如果您要讲述这个问题：

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

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

具有大于视口的固定宽度。这应该是100%。另外，最好给所有图片，最大宽度为100%：

img {max-width: 100%;}