内容宽度未填满手机屏幕

Question

我正在努力使我的设计适合移动设备。我所拥有的是，当我在http://ipadpeek.com/（很棒的工具！）上查看设计时，一切都非常合适，尽管当我通过我的 iPhone 4 实际查看它时，内容仅占页面的 80% 左右，而剩余的 20%是白色背景。

只有一个元素看起来适合整个宽度，并且具有以下样式：

<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>

.text-elements {
    float: none;
    margin: 0;
    padding: 75px 10px;

    h2 {
      font-size: 4em;
      width: 100%;
    } 
}

任何想法为什么会发生这种情况？

Answer 1

仅供参考，大多数在线 iPad 风格工具（例如 http://ipadpeek.com/）无论如何都不会发现任何这些溢出问题。

最后我发现问题在于至少有一个或多个 div 设置了明确的宽度，但很难找到罪魁祸首！

其他有此问题的人的提示：

1. 如果您知道任何设计都是响应式的，请在主样式表中的任何显式宽度 div 上使用 max-width: Xpx、width: 100%，以避免它们成为以后课程的罪魁祸首。

1234563 /p>

2. 在一些包含您的内容的主要包装器上尝试overflow: hidden，以查看问题来自何处。