码迷,mamicode.com
首页 > 其他好文 > 详细

mobileSite开发Tips

时间:2020-05-27 20:42:10      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:模糊   缩小   图片显示   内存   思路   star   content   定时   开启   

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

mobileSite开发Tips

标签:模糊   缩小   图片显示   内存   思路   star   content   定时   开启   

原文地址:https://www.cnblogs.com/10manongit/p/12975947.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!