移动设备上的引导容器问题答案

【问题标题】：Problems with Bootstrap Container on Mobile Devices移动设备上的引导容器问题
【发布时间】：2014-06-17 16:23:30
【问题描述】：

我正在处理我网站的响应部分，但我遇到了移动设备的错误。当我在我的桌面浏览器上测试响应式时，一切都很好，但是当我在我的 iPhone 上测试时，就会发生这种情况。

截图 #1 截图#3

我不知道为什么，但容器在右侧应用了某种边距。已经到处搜索了，没有任何东西可以解决它。已经更改了视口并为主体添加了最小宽度。当我在主 div 上有 100% 的宽度时，就会发生这种情况。

如果有人可以帮助我解决这个问题，我将非常感激，因为我正在尝试解决这个问题好几天。

【问题讨论】：

你的css中有html, body {width: 100%;}吗？如果没有，请添加它。这可能是问题的一部分。此外，请确保您的头脑中有一个 viewport 元标记。
看起来你可能有一个固定宽度的东西，它迫使页面的宽度变得那么大。搜索你的 CSS，看看你是否能找到任何东西。不久前在我自己的网站上遇到过同样的问题，这是由于我没有意识到的固定宽度。
我用来追踪@AndrewMatthew 提到的东西的一种技术是把html, body (width: 100%, overflow: hidden} - 这将“砍掉”任何你设置得太宽的东西，然后你可以看到您需要在哪里寻找宽度问题。
我正在尝试搜索我的 CSS。问题是如果我把我的桌面浏览器的宽度变小，一切都很好，问题是当我在 iphone 上打开时，它会出现这个错误。
嗨阿米尔。该网站的链接是这个。 link。非常感谢！

【解决方案1】：

最后我解决了这个问题。经过大量时间尝试不同的事情后，我刚刚为所有小型设备编写了这个 css。

@media (max-width: 768px) {
html, body {
width: auto !important;
overflow-x: hidden !important;
}
}

我不知道这是否是最好的方法，但解决了我的问题。我有这个错误很长时间了，我很高兴它现在可以工作了。

非常感谢所有试图帮助我的人。干杯

【讨论】：