关于Webapp的注意事项
2014-03-07 16:26
330 查看
meta标签
使用rem
* IE9开始支持
* IOS4.0开始支持
* 安卓支持
Android2.3不支持
* position:fixed-->使用iscroll.js插件
* 渐变新式写法不支持,需要使用老式写法
* 阴影不支持,用边框border
* 使用flex
盒模型溢出
圆角问题
当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)
字体: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: http://jsbin.com/vojoj/2/ 父元素:
display : table;
table-layout : fixed;
width : 100%;
子元素:
display : table-cell;
<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开发最佳实践](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)
字体: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: http://jsbin.com/vojoj/2/ 父元素:
display : table;
table-layout : fixed;
width : 100%;
子元素:
display : table-cell;
相关文章推荐
- 关于支付宝的注意事项
- 关于杭电OnlineJudge一些注意事项
- 关于InterlliJ IDEA中加入JSTL标签库的注意事项
- WCF-003:C#中关于使用第三方服务的注意事项
- 复赛注意事项:关于文件读写的格式
- 关于Linux driver中device_create()使用的注意事项
- 关于dubbo结合hessian实现流传输的配置文件及注意事项
- 浅谈关于JavaScript解析XML文件的注意事项
- 关于Spring框架的注意事项
- 关于用myeclipse在struts-config.xml中配置datasource的注意事项
- 关于使用百度地图的IOS SDK 的注意事项
- 关于写类的一些常规注意事项
- 关于TC35模块的一些注意事项。
- 关于二次开发中的注意事项
- 关于java异常的一些准则,注意事项
- 关于c++的一些注意事项
- 关于mysql运行效率优化注意事项及要点
- 关于在delphi7中安装ocx后,控件未被显示在控件面板上的注意事项
- 关于scala中lazy val的几个注意事项
- 关于IO模拟时序(SPI)的注意事项