碰到的一些坑
题目:手机端
click
事宜会有约莫300ms
的耽误缘由:手机端事宜
touchstart
–\>touchmove
–>touchend
ortouchcancel
–>click
,由于在touch事宜触发以后,浏览器要推断用户是不是会做出双击屏幕的操纵,所以会守候300ms来推断,再做出是不是触发click事宜的处置惩罚,所以就会有300ms的耽误处理要领:运用touch事宜来替代click事宜,如 zepto.js 的tap事宜和fastClick,另有我本身也写了个挪动端手势操纵库 mTouch,都有响应的事宜能够替代click事宜处理这个题目
题目:在部份机型下(如小米4、小米2s、复兴)
body
设置的font-size
是用rem
单元的话,若其他元素没有设置font-size,该font-size值继续于body,则会很高几率涌现字体非常变大的状况缘由:预计是跟app的webview默许设置有关,body的font-size运用rem单元,就是相对于当前根节点的font-size来肯定的,可能在某些webview的设置下,body用的是webview设置的默许字体大小,由于在我给html设置了一个px单元的默许font-size时,照样会涌现字体非常变大的状况,详细webview的一些细节就没有再研讨了
处理要领:body设置一个
px
单元的默许font-size值,不必rem,或许给字体味非常变大的元素设定一个px单元的font-size值题目:运用zepto的
tap
事宜时会涌现“点透”bug,比方:一个元素A绑定了tap事宜,紧跟厥后的元素B绑定了click事宜,A触发tap事宜时将本身remove掉,B就会自动“掉”到A的位置,接下来就是不正常的状况,由于这个时刻B的click事宜也触发了缘由:由于tap事宜是经由过程
touchstart
、touchmove
、touchend
这三个事宜来模拟完成的,在手机端事宜机制中,触发touch事宜后会紧接着触发touch事宜坐标元素的click事宜,由于B元素在300ms内恰好“掉”返来A的位置,所以就触发了B的click事宜,另有zepto的tap事宜都是代理到body的,所以想经由过程e.preventDefault()阻挠默许行动也是不可行的处理要领:(1)A元素换成click事宜;(2)运用我写的库 mTouch 来给A绑定tap事宜,然后在事宜回调中经由过程e.preventDefault()来阻挠默许行动,或许换用其他的支撑tap事宜的库
题目 ios自动辨认数字为手机号码,致使部份设置好的款式无效(字体色彩等)
缘由 ios自动辨认数字后会给数字加上
<a href="tel:数字">数字</a>
标签,所以数字的部份款式继续了a标签的款式,致使部份款式无效处理要领:(1)
meta
标签加上<meta name="format-detection" content="telephone=no" />
阻挠默许辨认数字为电话;(2)设置款式的时刻 css 挑选器把a标签选上,如:<span class="number">123<span> // 本来款式 .number { color: #f00; } // 修改后款式 .number, .number a { color: #f00; }
一些有效妙技点
经由过程设置css属性
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
取消掉手机端webkit浏览器 点击按钮或超链接之类的 默许灰色背景色设置css属性
-webkit-user-select:none;
掌握用户不可挑选笔墨区域性
overflow: scroll | auto
转动时运用原生结果:-webkit-overflow-scrolling: touch
(ios8+,Android4.0+)单行、多行溢出省略
/* 单行省略 */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 多行省略 */ .ellipsis-2l { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 数值代表显现几行 */ -webkit-box-orient: vertical; }
垂直居中经常使用要领:
<!-- html构造 --> <body> <div class="wrap"> <div class="box"></div> </div> </body> /* css款式 */ /* (1) 模拟单行笔墨居中的体式格局 */ .wrap { width: 200px; height: 80px; line-height: 80px; } .box { display: inline-block; vertical-align:middle; } /* (2) 已知宽高,经由过程position:absolute; */ .wrap { width: 200px; height: 200px; position: relative; } .box { width: 100px; height: 80px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -40px; } /* (3) 未知宽高,经由过程css3属性 transfrom */ .wrap { width: 200px; height: 200px; position: relative; } .box { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* (4) 经由过程flex规划 */ <!-- html构造 --> <body> <div class="wrap flexbox flexbox-center flexbox-middle"> <div class="box"></div> </div> </body> /* css款式 */ .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* 程度居中 */ .flexbox-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /* 垂直居中 */ .flexbox-middle { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
retina屏幕完成真正的1px边框
<!-- html构造 --> <body> <div class="box retina-border rt-bd-all"></div> </body> /* css款式 */ .box { width: 200px; heigth: 100px; box-sizing: border-box; border: 1px solid #aaa; } /* 去掉元素原有的边框 */ .retina-border { position: relative; border: none; } /* 经由过程设置伪元素放大到2倍的宽高,设置1px边框,再减少1倍,以到达0.5px边框的结果*/ .retina-border:after { content: ''; display: block; width: 200%; height: 200%; position: absolute; left: 0; top: 0; box-sizing: border-box; border: 0px solid #aaa; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.5); transform: scale(.5); } .rt-bd-all:after { border-width: 1px; } /* 假如只是想设置一条边框,能够如许改一下,以此类推 */ <!-- html构造 --> <body> <div class="box retina-border rt-bd-b"></div> </body> /* css款式 */ .tr-bd-b:after { border-bottom-width: 1px; } .tr-bd-t:after { border-top-width: 1px; } .tr-bd-l:after { border-left-width: 1px; } .tr-bd-r:after { border-right-width: 1px; }
关于程度、垂直、多列规划的多种完成参照:《应用HTML和CSS完成罕见的规划》