iPhone 6中的水平滚动

Question

我在我的网站上使用了wordpress twentyten主题的响应版本，并稍微调整了一些css以更好地显示内容。

我的网站在iPhone 4 + 5上看起来很不错，但是当我在我的老板iPhone6上查看时，网站会横向滚动。我很确定我有正确的css媒体查询大小“667”，所以我不确定为什么6的内容似乎在页面的右侧扩展。

（我的网站在这里：http://www.inspiredental.ca/new/）

我为响应部分创建了一个CSS的PasteBin：http://pastebin.com/4E6wSA1p

---

Answer 1

我无法在浏览器中复制错误，但我在CSS中看到了一个标志：

#container {
    margin: 0 -320px 0 0;
}

尝试将其置于媒体查询中并再次在iPhone上进行测试，看看是否存在问题：

#container {
    display: none;
}

如果您不想使用框架，可能需要重写#container，如下所示：

#container {
    float: left;
    margin: 0;
    width: calc(100% - 300px);
}
#content {
  margin-right: 0;
}

主容器的负利润率很高只是在寻找麻烦。为容器和侧边栏做百分比并使用媒体查询操作它们更容易。上面的示例允许您在重置边距时为侧边栏设置固定宽度。