移动设备上的自举容器问题

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

截图＃1 enter image description here 截图＃3

我不知道为什么，但容器适用某种保证金的权利。已经到处搜索，没有任何东西可以修复它。已经改变了视口，并在主体上添加了最小宽度。当我在主div上有100％的宽度时会发生这种情况。

如果有人可以帮助我，我会非常感谢，因为我试图解决这个问题。

你在任何地方的CSS都有'html，body {width：100％;}'吗？如果你不这样做，请添加它。这可能是问题的一部分。另外，请确保你头上有一个'viewport'元标记。 –

看起来你可能有一些固定宽度的东西，这会迫使页面的宽度变得很大。搜索你的CSS，看看你能找到什么。前一段时间，在我自己的网站上遇到过类似的问题，这是由于我没有意识到的是固定的宽度。 –

我用来追踪@AndrewMatthew提到的一种技术是将html，body（width：100％，overflow：hidden）'' - 这会“砍掉”你设置得太宽的任何东西，然后你可以看到你需要寻找宽度问题 –

最后我解决了这个问题。花了很多时间尝试不同的东西之后，我就为所有的小设备写了这个CSS。

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

我不知道这是否是最好的方法，但解决了我的问题。我有这个bug很长一段时间，我很高兴现在正在工作。

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

2014-06-20 11:57:02

回答