Html 如何修复Mobile Safari中的DOM

我有一个一页六个部分的网站。我希望每个部分都能填满整个屏幕或视口（特别是iPhone 4s）。目前，它就像是每个部分堆叠在一起（这不是我想要的）

HTML标记：

<meta name="viewport" content="intial-scale = 1.0, maximum-scale = 1.0" />

以下是当前状态的屏幕截图：

---

有没有人有什么想法可以帮助我或者让我沿着正确的方向思考呢？

那么，我想这会解决你的问题

您可以向不同的DIV、边距、文本、绝对元素等添加单独的背景

{
    height: 300px;
    width: 100%;
    display: block;
    float: left;
    clear: none;
    position: relative;
}

---

在div中添加z索引以及框阴影可能会提供您想要的“堆叠页面”效果—请参见以下JSFIDLE：

就图像而言，背景图像大小和其他背景图像属性似乎得到了相当广泛的支持，但如果您关心兼容性（IE 8），像backstretch.js这样的javascript解决方案可能会更好

也就是说，如果您的div不需要流动并且始终保持100%的宽度，那么您就不需要所有这些额外的CSS属性。这种格式可以：

.one {
    height: 300px;
    width: 100%;
    display: block;
    background-color: red;
   -webkit-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px -5px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px -5px 5px rgba(50, 50, 50, 0.75);
}  

---

在jsfiddle中查看：

您想拥有这6个块，将它们的宽度扩展到浏览器的窗口大小，然后向下滚动以访问其余的块吗？是的，这就是我想要的。每个块都有不同的背景图像。您可以在下面找到答案。如果您满意，请将问题标记为已回答！鲍里斯，这让我更亲近了。但是，没有，每个看起来像是叠在一起的，就像一张纸。我不太清楚你的意思是什么？您可以添加边距：5px 0；你能不能给我们提供一张它应该是什么样子的图片？这里是桌面的链接：www.iamparisjones.com/newsite桌面站点由JavaScript提供支持。这不是你可以在点击时滚动到特定内容的方式。这使得这是一个完全不同的问题，部分但并非完全与css相关。它可以完全使用CSS来完成。如果你玩一段时间，你可以让它变得很平滑。无论如何，点击滚动功能对于移动设备来说并不实用。我宁愿将其作为一个连续循环滚动浏览。@justLearning，有一个名为窗帘.js的插件做了类似的事情-你可以在这里找到一个例子：该插件不再维护，但窗帘效果已经流行了一段时间，所以有很多JavaScript选项。Marcatectura，很抱歉给你带来了困惑。我不想要堆叠的页面外观。从技术上讲，我希望他们彼此视差；然而，现在我将把每个部分放在一个列中的每个部分的顶部。

{
    height: 300px;
    width: 100%;
    display: block;
    float: left;
    clear: none;
    position: relative;
}

.one {
    height: 300px;
    width: 100%;
    display: block;
    float: left;
    clear: none;
    position: relative;
    z-index: 6;
    background-color: red;
    -webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px 5px 5px rgba(50, 50, 50, 0.75);
}

.one {
    height: 300px;
    width: 100%;
    display: block;
    background-color: red;
   -webkit-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px -5px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px -5px 5px rgba(50, 50, 50, 0.75);
}