移动端 Web 开发踩坑之旅

前言

最近在一个移动端的 Web 项目中踩了很多的坑，感觉有必要把它们记录下来，分享给即将踏入移动端 Web 开发大门的新人们。

一、从布局说起

移动端的整体布局一般来说可以分为上中下三个部分，分别为 header、main、footer，其中header、footer 是固定高度，分别固定在页面顶部和页面底部，而 main 是占据页面其余位置，并且可以滚动。

（上图是使用纯 CSS 实现，然后截图，上传到专栏有点失真，看官老爷们将就着看吧。）

页面布局如下：

  

  

根据页面滚动的位置分为两种布局，一种是滚动 body，另一种是固定 body 的高度为100%，在 main 中滚动。

第一种布局有个优点，就是页面的地址栏会随着 body 的滚动隐藏起来，并且 Android 设备中，滚动 body 会更加的流畅，如果项目中有类似需求可以考虑。

实现布局的方式如下:

body {
  overflow: auto;
}

.header,
.footer {
  position: fixed;
  left: 0;
  right: 0;
  height: 44px;
}

.header {
  top: 0;
}

.footer {
  bottom: 0;
}

.main {
  height: 100%;
  padding: 44px 0;
}

第一种情况比较适合长列表页面，整个页面除了 header 和 footer 之外都需要滚动，但很多时候，我们只希望页面的某个元素滚动，这个时候，就采取第二种布局方式。

这种页面布局有三种相对简单的实现方式：

1. fixed 定位
   

2. absolute 定位
   

3. flex 定位
   

最容易想到的实现方式是 fixed 定位，实现方式如下：

html, body {
  height: 100%;
  overflow: hidden;
}
.header,
.footer {
  position: fixed;
  left: 0;
  right: 0;
  height: 44px;
}


.header {
  top: 0;
}


.footer {
  bottom: 0;
}


.main {
  height: 100%;
  padding: 44px 0;
  box-sizing: border-box;
}

fixed 定位实现起来简单，在大多数浏览器中也能正常显示，但是 fixed 定位在移动端会有兼容性问题，后面会提到，所以不建议这种实现方式。

absolute 定位和 fixed 定位类似，只要把 header 的 footer 的 position 改为 absolute 就可以了。

细心的小伙伴可能发现了，这里的 main 没有设置 overflow ，因为这里有一个坑，不管是absolute 定位还是 fixed 定位都一样，为了方便描述，以下只说 fixed 定位(在 absolute 定位也一样成立)。在PC端没有问题，但是在移动端，如果 main 设置了 overflow 为 true，header 会被 main 遮住，对，没有错，虽然是 fixed 定位，但是在移动端，如果 fixed 定位节点后面紧接跟着的兄弟节点是可滚动的(也就是设置了 overflow 为 true )，那么 fixed 节点会被其后的兄弟节点遮住。

这个问题解决方式有很多，既然是 fixed 定位后面紧接着可滚动的兄弟节点才会有这个坑，只要让他的条件有一个不成立就好了，有以下解决方案：

1. 让 fixed 定位节点后面不紧接着可滚动的节点
   

2. 不让 scroll 节点遮住 fixed 节点
   

第一种方方案有以下可选方法:

1. 把所有 fixed 节点放在 scroll 元素后面，即把 header 节点放在 main 节点后面