移动响应页面未占据全宽

Question

我正在为客户设计响应式设计，我运行遇到页面右侧有 space 不必要 padding/margin 的问题我似乎无法摆脱。

我检查了我的所有元素和样式，似乎没有任何东西可能导致此问题。我有元标记 header.

<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) 
{

这里是URLhttp://www.smcelectric.com/smc/

我正在使用 Chrome 的 "device mode" 视图来检查它，并在我的 phone.

上使用它

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

你会注意到右边有一些随机的 space。

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

Answer 1

如果您要讲述这个问题：

原因是，您的内容溢出 view-port。只是想知道是否是这种情况，那么您可能需要以不同的方式处理它，因为您的 children:

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

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

img {max-width: 100%;}

移动响应页面未占据全宽

Mobile Responsive Page Not Taking Full Width

css

jquery

responsive-design

responsiveness