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,定时器一定要记得清算,反复时会内存不开释就会卡顿
____________________________________
坚持更新...
    原文作者:代码碎片
    原文地址: https://segmentfault.com/a/1190000002783350
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞