最近在做android和ios的webview开发，踩过不少坑，略有所获，记录一下
移动web中的兼容性问题，有时候顽强的根本解决不了，不过注意以下几点，可以规避一些基本的Bug（并且这些Bug后期发现是很难改的）
1. 常用的meta标签，至少这几个还是写上
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
viewport 这个属性有大用处，可以帮助做页面适配，后面再讲
2. 使用normalize.css这个库，PC端可以直接引入这个CSS，移动端建议看一下这个库里的代码，取出有用部分
这个库增加了一些基本html元素的样式，尤其是表单元素，很大程度上缓和了不同浏览器上CSS的兼容性问题
提供一个CDN地址
//cdn.bootcss.com/normalize/4.1.1/normalize.css
3. 开发网页之前，底部先写一层绝对定位的DIV，宽高等于设备宽高
如果不这么写，页面在不同浏览器或者webview上，不可能恰好撑满屏幕，可能或大或小
<style type='text/css'>
#container {
position: absolute;
-webkit-overflow-scrolling: touch; /* 在IOS设备上可以有缓动效果 */
overflow: auto; /* 页面的滚动都是在这个DIV中滚动 */
top: 0; /* 顶部贴合 */
bottom: 0; /* 底部贴合 */
width: 100%;
box-sizing: border-box; /* 盒模型的大小以边框为界，默认是以盒模型内容为界 */
-webkit-overflow-scrolling: touch; /* 这个样式可以在IOS设备上增加平滑滚动、回弹效果，但是不仅仅如此，如果不写，在safari上的滚动，卡得难过 */
/*-webkit-transform: translate3d(0,0,0);*/ /* 这个样式可以开启3D加速提高动画渲染性能，但是不建议写在这里，这样会使DIV中的绝对定位失效，写到有很多动画的地方去吧 */
}
</style>
<body>
<div id='container'>
<!-- do something -->
</div>
</body>
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调试，以及页面适配的问题，后面我们接着记录
网友评论