响应式网站在智能手机上显示较大的右侧边距答案

【问题标题】：Responsive site shows large right side margin on smart phones响应式网站在智能手机上显示较大的右侧边距
【发布时间】：2013-11-03 16:59:03
【问题描述】：

我们已经在http://tcsdesignreno.com/zing-cards/ 上设置了一个站点来响应。每当我在在线响应式设计测试网站（例如：http://mattkersley.com/responsive/ 或 http://beta.screenqueri.es/）上查看它时，它看起来都很好，但如果我在 HTC Sensation、iPhone 5 或 Galaxy 3 上打开它，它会切断右侧屏幕。我在每部手机上都使用了标准的网络浏览器、safari 和 chrome。我试图通过将我的安卓手机连接到我的电脑来调试它，但似乎找不到问题。

没有硬编码的边距或我能找到的任何其他东西会导致手机这样做。

提前感谢您的帮助！

马特

【问题讨论】：

标签： android iphone css responsive-design

【解决方案1】：

首先要解决的是 class="logos" 的宽度。对于响应式设计，您的断点和宽度最好在 ems 中设置。您可以删除该元素上的宽度声明并让它变得流畅。

另一件需要注意的是您在 Zing 和 Cards 图像上的负边距。

【讨论】：

【解决方案2】：

您可以将网络浏览器调整为小尺寸并查看出现的滚动条，而不是使用响应式测试网站。

<head> 上的 padding: 0 20px; 有助于滚动条。我会仔细阅读您的 CSS 以获取可能导致此问题的填充/边距（就像 jbenjohnson 所说的检查您的负边距）。

【讨论】：

我检查了所有负边距，并在小于 500 像素的屏幕上修复了较大的边距（谢谢！），但我的 ipad 右侧仍有较小（10 - 20 像素）的边距问题，并且手机。我似乎找不到导致它的代码。任何其他想法将不胜感激。