关于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)

关于Webapp的注意事项,布布扣,bubuko.com

关于Webapp的注意事项

上一篇:Android学习笔记_64_手机安全卫士知识点归纳(4) 流量统计 Log管理 混淆打包 加入广告 自动化测试 bug管理


下一篇:安卓 安装 platforms 的时候报错--访问 url 出错