Question

我正在尝试让我的设计适合移动设备。我所看到的是，当我在http://ipadpeek.com/（Great Tool！）上查看设计时，一切都很合适，但是当我实际通过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

仅供参考，http://ipadpeek.com/等大部分在线iPad风格工具都不会发现任何这些溢出问题。

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

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

如果您知道任何设计会有响应，请在主样式表中使用max-width: Xpx，width: 100%在任何显式宽度div上，以避免它们在以后的过程中成为罪魁祸首。
在项目上使用宽度：100％时，请确保在内部div中添加任何其他填充（特别是如果它以像素为单位），或者为width: 95%，{{1 }}
在包含您内容的主要包装上尝试padding: 2.5%，以查看问题的来源。

内容宽度未填充移动屏幕

1 个答案: