关于Webapp的注意事项
- 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；
- 使用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开发最佳实践](http://www.ipresst.com/works/528892e11d0495f30f00762e)
*
[20个实用webApp前端开发技巧](http://www.candoudou.com/archives/155)
*
[webApp开发进阶](http://www.w3ctech.com/p/1154)
*
[tap-hightlight-color](http://www.cnblogs.com/lilyimage/p/3363632.html)
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
