移动端单屏解决方案

概述

很多时候，我们在移动端需要把一整页的内容展现给用户，这个时候就需要移动端使用单屏。这篇博文记录我在写移动端单屏网页时遇到的一些坑，供以后开发时参考，相信对其他人也有用。

安卓对height:100%的兼容

如果设置了如下css代码：

html, body {
    height: 100%;
}

那么在安卓浏览器上会发生滚动时，body突然增大或减少的情况，这是因为安卓浏览器考虑到了系统导航条的问题。这个极大的影响了体验，解决方法是用js设置body一个固定的值。

swiper

上面的情况只会在页面本身高度大于屏幕高度时出现（下面要放版权等其它东西）。如果页面本身高度等于屏幕高度就不会出现。

swiper是业内常用的解决单屏的库。使用它的时候一定要加入下面两行代码，缺一不可：

html, body {
  position: relative;
  height: 100%;
}

这是swiper初用者经常忽略的地方。

内滚动与外滚动

单屏通常会伴随着手指滑动屏幕时切换页面的操作。但是如果页面内有滚动条怎么办？

有2种解决方法：

1. 设置swiper的slide不能滚动，然后添加一个导航条来控制滚动。
2. 设置swiper的slide横向滚动，然后页面内的滚动是竖向滚动。

那首页的slide需要竖向滚动怎么办？方法是嵌套多个swiper，首页的swiper使用竖向滚动（首页内一般没有滚动条），有滚动条的页面使用另一个横向滚动的swiper。