移动web网页开发细节

最近在做android和ios的webview开发，踩过不少坑，略有所获，记录一下

移动web中的兼容性问题，有时候顽强的根本解决不了，不过注意以下几点，可以规避一些基本的Bug（并且这些Bug后期发现是很难改的）

1. 常用的meta标签，至少这几个还是写上

viewport 这个属性有大用处，可以帮助做页面适配，后面再讲

2. 使用normalize.css这个库，PC端可以直接引入这个CSS，移动端建议看一下这个库里的代码，取出有用部分

这个库增加了一些基本html元素的样式，尤其是表单元素，很大程度上缓和了不同浏览器上CSS的兼容性问题

提供一个CDN地址

//cdn.bootcss.com/normalize/4.1.1/normalize.css

3. 开发网页之前，底部先写一层绝对定位的DIV，宽高等于设备宽高

如果不这么写，页面在不同浏览器或者webview上，不可能恰好撑满屏幕，可能或大或小

       

               

       

4. 关于页面的滑动回弹（橡皮筋效果）不要轻易使用

在Android设备的webview中，如果既要考虑兼容，又要考虑流畅度，就目前的实验来看，是不可能的

1. 如果采用iscroll这个滑动回弹JS插件，确实可以实现这个效果，但是在部分低端android设备上，很卡很卡很卡…………

2. 如果你想自己实现一个，第一个能想到的，就是去捕touchstart,touchmove,touchend 这几个滑动事件，但是由于浏览器对这几个事件的支持并不相同，处理兼容性都得折腾死你，唯一容易采用的，是监听scroll事件（页面滚动），不过本人尝试过，效果也很烂

3. 滑动回弹效果，一般在app上用于拉动刷新功能，不过建议采用滚动到底部，自动刷新即可，不建议做滑动回弹效果

5. 采用CSS自动前缀工具，增强兼容性

很多CSS3的特性，让页面更加美丽，不过之前在工作中，发现一个问题，例如flex布局，在Android4.3版本的手机上，完全没起作用，查了CSS的兼容列表，也是正常的，flex布局是支持Android4.3及以后版本的，问题出在哪里呢？

最后确认问题在于CSS前缀上，这里的前缀并不是简单的在部分CSS熟悉前面加上-webkit-\-ms-这种前缀，有很多我们平时基本从来没用过的CSS属性，我们也不用记住这些繁琐的属性，直接推荐几个自动前缀工具吧

1. 一个npm模块 autoprefixer-cli (个人最喜欢)

安装

npm install autoprefixer-cli -g

命令行直接使用（xxx.css就是你需要加前缀的css文件）

autoprefixer-cli xxx.css

2. -prefix-free 一个JS库，很小，直接引入就可以了

http://leaverou.github.io/prefixfree/

3. webpack、glup、grunt等构件工具，都有对应的插件

基本需要注意的大概就这么多，还有android和ios的webview调试，以及页面适配的问题，后面我们接着记录