简体繁体 English

响应站点在智能手机上显示较大的右侧边距

[英]Responsive site shows large right side margin on smart phones

原文 2013-10-24 19:46:49 8 2 android/ iphone/ css/ responsive-design

We have programmed a site at: http://tcsdesignreno.com/zing-cards/ to be responsive. 我们已在http://tcsdesignreno.com/zing-cards/上设置了一个站点，以便响应。 Whenever I check it in online responsive design test sites (such as: http://mattkersley.com/responsive/ or http://beta.screenqueri.es/ ) it looks fine but if I bring it up on a HTC Sensation, iPhone 5 or a Galaxy 3 it cuts off the right side of the screen. 每当我在在线响应式设计测试网站（例如http://mattkersley.com/sensitive/或http://beta.screenqueri.es/ ）上对其进行检查时，它看起来都不错，但是如果我将其应用于HTC Sensation， iPhone 5或Galaxy 3，它会切断屏幕的右侧。 I have used the standard web browsers, safari, and chrome on each of the phones. 我在每部手机上都使用了标准的Web浏览器，Safari和chrome。 I have tried to debug it by contecting my andriod phone to my pc but can't seem to find the issue. 我试图通过将Andriod手机安装到我的PC上进行调试，但似乎找不到问题。

There are no hard coded margins or anything else that I can find that would cause the phones to do this. 没有硬编码的边距或我能找到的其他任何会导致电话执行此操作的内容。

Thanks in advance for you help! 预先感谢您的帮助！

Matt 马特

2 个解决方案

The first thing to fix is the width on class="logos". 首先要解决的是class =“ logos”的宽度。 For a responsive design, your breakpoints and widths should ideally be set in ems. 对于响应式设计，理想情况下，您的断点和宽度应在ems中设置。 You can remove the width declaration on that element and let it be fluid. 您可以删除该元素上的宽度声明并使其流畅。

Another thing to look at is the negative margins that you've got on the Zing and Cards images. 要查看的另一件事是Zing和Cards图像上的负边距。

You can just resize your web browser to a small size and see the scroll bars that appear instead of using responsive test websites. 您可以将网络浏览器调整为较小的尺寸，然后查看显示的滚动条，而不使用响应式测试网站。

You have padding: 0 20px; 您有padding: 0 20px; on <head> that is contributing to the scroll bars. 在<head>上有助于滚动条。 I'd peruse your CSS for padding/margins that could be contributing to this (like jbenjohnson said checkout your negative margins). 我会细读您的CSS，以寻找可能有助于此的填充/边距（例如jbenjohnson说，结帐您的负边距）。