mobileSite开发Tips

Posted 2020-12-06 10manongit

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，定时器一定要记得清理，重复时会内存不释放就会卡顿
____________________________________
保持更新...