Question

我正努力让我的网站做出回应。这是一个链接：http://www.iPwn.com。

我正在使用Google Chromes设备模式，并使用较小的视图（如iPhone 4或320px宽度），我不断获得额外的宽度和水平滚动条。

注意：这主要是针对320px左右的宽度..任何更大的东西我都没有修好（但因为我一直坚持这个）

我逐个完成并删除了所有元素，一块一块地查看代码，试图找出横向扩展布局的内容。我无法在任何地方找到它。

起初我以为它是顶部的导航，但是我完全删除了它，它仍然存在。

关于它为什么要这样做的任何想法？

CNC中我之前因为评论而再次测试它，并且它可以在Firefox中运行，并且由于某种原因，当您调整浏览器窗口大小时，它突然在Chrome中运行。但是，它仍然无法在设备模式＆＃34;中工作，也不能在我的iPhone上工作。

这是一个屏幕截图： http://i.imgur.com/CntrgOk.jpg

Answer 1

我认为你的标题部分有问题。它取336px而不是320px。

#page{
    overflow:hidden;
}

希望这可以解决您的问题

上面的解决方案已经快速修复了一段时间。这不是完美的解决方案;从技术上讲。

真正的问题在于 #blogFeed 部分。

你的风格

#blogFeed ul.postList {
  margin-left: 5%!important;
}

#blogFeed ul.postList {
  list-style-type: none;
  color: #fff;
  display: block;
  width: 95%;
  margin-left: 0px!important;
  padding-left: 0px!important;
}

它使您的容器宽度为105％（320 + 16），即 336px ，因此容器的原始尺寸现在为336px而不是320px;

标题问题：使用“固定”定位的问题在于它使元素不在流中。因此无法相对于其父级重新定位。所以现在宽度：100％到FIXED标题，它取336px并离开视口（320px）。

我希望你能理解这一点。

Answer 2

找到它。这些卡的宽度为50％，但要记住<ul>有一个左边的填充。

2个解决方案

1）ul{ padding:0px; }
2）cards{width:calc(50% - (ulpadding-left/2) )}

移动视图的额外宽度 - 无法确定导致额外空间的因素

2 个答案: