響應式網站在智能手機上顯示較大的右側邊距

我們已經編制了一個網站：http://tcsdesignreno.com/zing-cards/以進行響應。每當我在在線響應式設計測試網站（例如：http://mattkersley.com/responsive/或http://beta.screenqueri.es/）中檢查它時，它看起來很好，但如果我在HTC Sensation，iPhone 5或Galaxy 3上提起它，它會切斷屏幕的右側。我在每部手機上都使用了標準網頁瀏覽器，safari和chrome。我試圖通過將我的andriod手機與我的電腦進行調試，但似乎無法找到問題。響應式網站在智能手機上顯示較大的右側邊距

沒有硬編碼的頁邊空白或其他我能找到的東西會導致電話執行此操作。

在此先感謝您的幫助！

Matt

2013-10-24 MattM

首先要解決的是class =「logos」上的寬度。對於響應式設計，理想情況下應該在ems中設置斷點和寬度。你可以刪除該元素的寬度聲明，並讓它變得流暢。

另一個需要關注的是Zing和Cards圖像上的負邊距。

2013-10-24 20:21:43 jbenjohnson

您可以將您的網頁瀏覽器調整爲小尺寸，然後查看顯示的滾動條而不是使用響應式測試網站。

您有padding: 0 20px;<head>這是促成滾動條。我會仔細閱讀你的CSS來填充/邊距，這可能會對此產生影響（就像jbenjohnson所說的檢查你的負邊距）。

2013-10-24 21:54:01 philip

我檢查了任何負邊距，並且在小於500px的屏幕上固定了較大的邊距（謝謝！），但我的iPad和手機右側的邊距問題仍然較小（10-20像素）。我似乎無法找到導致它的代碼。任何其他的想法，將不勝感激。 – MattM

回答