· meta标签

<

meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
宽度＝设备宽度，初始比例＝1，阻止放大，最小比例＝1，最大比例＝1；target-densityDpi=device-dpi 阻止缩放（有时user-scalable=no没有效果，需要加上这句）
 
· 使用rem
　　* IE9开始支持　　* IOS4.0开始支持　　* 安卓支持
· Android2.3不支持
　　* position:fixed-->使用iscroll.js插件　　* 渐变新式写法不支持,需要使用老式写法
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#666666), color-stop(.3,#333333))
　　* 阴影不支持，用边框border　　* 使用flex
父元素:display:-webkit-box;
子元素:-webkit-box-flex:1;
· 盒模型溢出
-webkit-box-sizing:border-box;
· 圆角问题
当position:absolute;z-index:value;border-radius:value同时出现时，圆角上标题设置颜色后，圆角会成直角解决方法：在嵌套一层，父元素为position:absolute;z-index:value,子元素为border-radius:value;
· 需要注意的
　　-webkit-tap-highlight-color:rgba(0,0,0,0); //取消点击的背影颜色　　-webkit-focus-ring-color: rgba(0, 0, 0, 0);　　-webkit-appearance:none; //去除默认样式　　-webkit-touch-callout: none; //长按时不触发系统菜单　　-webkit-user-select: none; //用户不能选择元素间的任何内容　　outline:0 none; //取消轮廓
· 系列文章：
* [腾讯Cson的移动web开发最佳实践](//www.ipresst.com/works/528892e11d0495f30f00762e)* [20个实用webApp前端开发技巧](//www.candoudou.com/archives/155)* [webApp开发进阶](//www.w3ctech.com/p/1154)* [tap-hightlight-color](//www.cnblogs.com/lilyimage/p/3363632.html)
 
 字体：font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
 
 <meta name="format-detection" content="telephone=no">  数字识别为电话号码
 
 
等分：flex或者table,   DEMO: //jsbin.com/vojoj/2/
父元素：
       display : table;
       table-layout : fixed;
       width : 100%;
子元素:
       display : table-cell;

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！