1

我正在努力使我的设计对移动设备友好。我所拥有的是，当我在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%;
    } 
}

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

4

1 回答 1

1

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

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

给遇到此问题的其他人的提示：

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

  2. 在项目上使用 width: 100% 时，请确保向内部 div 添加任何其他填充（特别是如果它以像素为单位），或者考虑它，例如width: 95%, padding: 2.5%.

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

于 2013-01-11T13:35:38.850 回答