前端面试整理

最新推荐文章于 2020-10-14 07:00:00 发布

原创最新推荐文章于 2020-10-14 07:00:00 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了移动端Web开发中常见的问题与解决方案，包括click事件延迟、字体异常、tap事件点透bug等，并提供了实用的代码技巧，如取消点击高亮、垂直居中等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

web app遇到的一些坑及小技能（持续更新...）

遇到的一些坑

问题：手机端 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事件的库
问题 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;}