mobileSite开发Tips

1，根节点(html,body)overflow属性会遮盖fixed定位元素
2，fixed元素点击时会弹出底部的菜单，应该是浏览器特性(safari)
3，fixed元素使用后，在body里面使用padding-bottom以占位，若是放入其余元素中，最好也占位，避免IOS滑动特性遮盖元素
4，inline-block能够使用float让元素保持在一条线上，无需使用vertical-align进行对齐
5，touch事件里阻止默承认以减小卡顿，可是touchStart里面若是阻止，页面的滑动会受影响。
6，须要交替显示的元素，最好都隐藏，根据须要显示，能够避免页面跳动
7，页面返回统一调用histroy.back()方法就好，特殊处理进行URL判断
8，从哪里来到哪里去，在link里加入returnUrl来进行回跳
9，对于浮动的banner关闭时间，浏览记录能够经过localStorage进行存储
10，若是浏览器开启无痕模式，webStroage的setItem方法会报错，须要try Catch提醒用户
11，使用.clearfix:after {content: "";display: table;clear: both;}进行图片和文字的横向排列
12，文字多行省略{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;  -webkit-line-clamp: 2;-webkit-box-orient: vertical;-webkit-box-pack: center;}
13，能使用background-image当背景的就不使用img标签，减小内存占用。
14，若是须要在click事件中在绑定click事件，最好先解绑。或者换一种思路，使用trigger进行触发click事件
15，须要计算内部宽度，能够用padding进行宽度的设置，用于布局
16，对于图片，若是想完整放入div，须要设置display:block，不然会出现白边，由于图片默认是inline属性
17，因为浏览器对border渲染不一致(或滑动时候会改变宽度)，渲染粗细不均匀，能够使用div进行模拟border，也能够使用border-image代替
18，对于图片显示模糊，能够使用padding进行缩小，但不能从根本上解决问题
19，input去掉本来样式用图片代替时候，须要注意IOS里面会有黑色的背景，不然可能有黑边，设置background-color:white便可
20，关于跳转，支付宝WAP跳转，replace替代href跳转
21，定时器必定要记得清理，重复时会内存不释放就会卡顿
____________________________________
保持更新...