常见的问题
- 问题:手机端click 事件会有大约300ms 的延迟
原因:手机端事件 touchstart --\> touchmove --> touchend or touchcancel --> 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事件的库
- 待续...
一些有用技能点
- 通过设置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+)
- 单行、多行溢出省略
- 垂直居中常用方法:
- retina屏幕实现真正的1px边框
/* 单行省略 */
.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;
}
<!-- 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;
}
好的初始化样式很重要:
@charset "utf-8";
html {
color: #000;
background: #fff;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html * {
outline:none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
html, body {
font-family: sans-serif;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
input, select, textarea {
font-size: 100%;
}
/* 去掉各 Table cell 的边距并让其边重合 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 去除默认边框 */
fieldset, img {
border: 0;
}
/* 去掉 firefox 下此元素的边框 */
abbr, acronym {
border: 0;
font-variant: normal;
}
/* 一致的 del 样式 */
del {
text-decoration: line-through;
}
address, caption, cite, code, dfn, em, th, var {
font-style: normal;
font-weight: 500;
}
/* 去掉列表前的标识, li 会继承 */
ol, ul {
list-style: none;
}
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption, th {
text-align: left;
}
/* 来自 yahoo, 让标题都自定义, 适应多个系统应用 */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: 500;
}
q:before, q:after {
content: '';
}
/* 统一上标和下标 */
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* 正常链接 未访问 */
a:link {
}
/* 鼠标悬停 */
a:hover {
text-decoration: underline;
}
/* 默认不显示下划线,保持页面简洁 */
ins, a {
text-decoration: none;
}