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

时间:2013-10-24 19:46:49

标签: android iphone css responsive-design

我们已在http://tcsdesignreno.com/zing-cards/编制了一个网站,以便做出回应。每当我在在线响应式设计测试网站(例如:http://mattkersley.com/responsive/http://beta.screenqueri.es/)中查看时,它看起来很好但是如果我在HTC Sensation,iPhone 5或Galaxy 3上进行检查,它会切断屏幕右侧。我在每部手机上都使用了标准的网络浏览器,safari和chrome。我试图通过将我的手机与我的电脑对话来调试它,但似乎无法找到问题。

没有硬编码边距或其他任何可以导致手机执行此操作的内容。

先谢谢你的帮助!

马特

2 个答案:

答案 0 :(得分:0)

首先要修复的是class =“logos”的宽度。对于响应式设计,理想情况下,您的断点和宽度应设置为ems。您可以删除该元素上的宽度声明,让它变得流畅。

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

答案 1 :(得分:0)

您只需将网页浏览器调整为较小尺寸,然后查看显示的滚动条,而不是使用自适应测试网站。

padding: 0 20px;<head>对滚动条有贡献。我会仔细阅读你的CSS填充/边距,这可能有助于实现这一点(比如jbenjohnson说要检查你的负边距)。