【前端面试题】21道有关移动端的面试题(附答案)

前端发展到今天，移动端的流量已经超越了PC端。比如对绝大部分人来说，每天使用手机上网的时间要远高于使用笔记本电脑、计算机的上网时间。因此移动端变得越来越重要。每个人的手机屏幕大小不同、系统不同，因此移动端屏幕的响应式适配、移动端兼容性、浏览器的操作Bug等是移动端部分的面试题主要考察的内容。

1、在移动端，单击穿透是什么？

单击穿透现象有3种。

• 单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click事件。

• 页面单击穿透问题：如果按钮下面恰妤是一个有href属性的a标签，那么页面就会发生跳转。

• 跨页面单击穿透问题：这次没有蒙层了，直接单击页内按钮跳转至新页，然后发现新页面中对应位置元素的 click事件被触发了。

有4种解决方案。

（1）只用 touch。

这是最简单的解决方案，完美解决单击穿透问题，把页面内所有 click都换成 touch事件（ touchstart、 touched、tap）。

（2）只用 click

因为单击会带来300ms的延迟，所以页面内任何一个自定义交互都将增加300ms的延迟。

（3）轻触〔tap）后延迟350ms再隐藏蒙层。

改动最小，缺点是隐藏蒙层变慢了，350ms还是能感觉到慢的。

（4）添加 pointer-events:none样式。

这比较麻烦且有缺陷，不建议使用。蒙层隐藏后，给按钮下面的元素添上pointer-events:none样式，让 click穿过去，350ms后去掉这个样式。恢复响应的缺陷是蒙层消失后的350ms内，用户单击按钮下面的元素没反应，如果用户单击速度很快，一定会发现。

2、如何实现自适应布局？

通过以下几种方式实现。

（1）可以使用媒体查询做响应式页面。

（2）用 Bootstrap的栅格系统。

（3）使用弹性盒模型。

3、在移动端（ Android、ioS）怎么做好用户体验？

从以下几方面做好用户体验

（1）清晰的视觉纵线。

（2）信息的分组。

（3）极致的减法。

（4）利用选择代替输入。

（5）标签及文字的排布方式。

（6）依靠明文确认密码。

（7）合理地利用键盘。

4、如何解决 Android浏览器查看背景图片模糊的问题？

这个问题是 devicePixelRatio的不同导致的，因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，所以苹果系统当初就把 iPhone4的960×640像素的分辨率在网页里更改为480×320像素，这样 devicePixelRatio=2。

而 Android的 device PixelRatio比较乱，值有1.5、2和3。

为了在手机里更为清晰地显示图片，必须使用2倍宽高的背景图来代替img标签（一般情况下都使用2倍）。

例如一个div的宽高是100px×100px，背景图必须是200px×200px，然后设置 background-size;contain样式，显示出来的图片就比较清晰了。

5、如何解决长时间按住页面出现闪退的问题？

通过以下代码设置样式。

element {-webkit-touch-callout:none；}

6、如何解决 iPhone及iPad下输入框的默认内阴影问题？

通过以下代码设置样式。

element { -webkit-appearance:none；}

7、在iOS和 Android下，如何实现触摸元素时出现半透明灰色遮罩？

通过以下代码设置样式。

element {-webkit-tap-highiight-color:rgba （255， 255， 255， 0）}

8、在旋转屏幕时，如何解决字体大小自动调整的问题？

通过以下代码设置样式。

html, body, form, fieldset, p, div, hl, h2， h3， h4， h5， h6 {-webkit-text-size-adjust：100%;}

9、如何解决 Android手机圆角失效问题？

通过 background-clip:padding-box为失效的元素设置样式。

10、如何解决0S中 input键盘事件 keyup失效问题？

通过以下代码解决。

<input type='text' id='testInput"><script type="text/javascript">document. getElementById（'testInput'） .addEventListener（'input', function(e){var value =e .target .value；})；</script>

11、如何解决iOS设置中 input按钮样式会被默认样式覆盖的问题？

设置默认样式为none。解决方式如下。

input,textarea { border:0；-webkit-appearance:none；}

12、如何解决通过 transform进行skew变形、 rotate旋转会出现锯齿现象的问题？

通过以下代码设置样式。

-webkit-transform:rotate（-4deg） skew（10deg） translateZ（0）；transform:rotate（-4deg） skew（10deg） translateZ（0）;outline:lpx solid rgba（255， 255， 255， 0）;

13、如何解决移动端 click事件有300ms延迟的问题？

300ms延迟导致用户体验不好。为了解决这个问题，一般在移动端用 touchstart、 touchend、 touchmove、tap（模拟的事件）事件来取代 click事件。

14、在iOS中，以中文输入法输入英文时，如何解决字母之间可能会出现六分之一空格的问题？

可以用正则表达式去掉空格。

this .value =this .value .replace ( / \u2006/g，' ')

15、如何解决移动端HTML5音频标签audio的 autoplay属性失效问题？

因为自动播放网页中的音频或视频会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和 Android系统通常都会禁止自动播放和使用 JavaScript的触发播放，必须由用户来触发才可以播放。

解决这个问题的代码如下。

document addEventListener (' touchstart'， function( ) {//播放音频document .getElementsByTagName ('audio ) [0]. play ( );//暂停音频document getElementsByTagName ('audio) [0]. pause ( )；})；

16、如何解决移动端HTML5中date类型的input标签不支持 placeholder属性的问题？

代码如下。

< input placeholder = "请输入日期 " type="text" onfocus="（this .type='date'）" name="date">

17、如何通过HTML5调用 Android或iOS的拨号功能？

HTML5提供了自动调用拨号的标签，只要在a标签的href中添加tel：协议就可以了。

拨打固定电话的代码如下。

< a href="te1:021-12345678">单击拨打021-12345678</a>

拨打手机号码的代码如下。

< a href="te1:12345678901">单击拨打12345678901</a>

18、如何解决上下拖动滚动条时的卡顿问题？

通过以下代码设置样式。

body { -webkit-overflow-scrolling:touch; overflow-scrolling:touch；

Android3+和iOS5+支持CSS3的新属性 overflow- scrolling，该属性也可以解决上述问题。

19、如何禁止复制或选中文本？

通过以下代码设置样式。

Element {-webkit-user-select:none；-moz-user-select:none ；-khtml-user-select:none ；user-select:none；

20、如何解决 Android手机的默认浏览器不支持 websocket的问题？

解决办法就是把通信层的websocket改成websocket+http双协议，对外封装成Net。业务层对 websocket的调用都改成对Net的调用。

Net默认连接websocket，如果不攴持，就自动切换到http长轮询。

http的长轮询在使用的时候会有卡顿现象。

21、说说你所知道的移动端响应式适配的方法。

对于简单一点的页面，一般高度直接设置成固定值，宽度一般撑满整个屏幕。

对于稍复杂一些的页面，利用百分比设置元素的大小来进行适配，或者利用flex等CSS属性设置一些需要定制的宽度。

对于再复杂一些的响应式页面，需要利用CSS3的媒体查询属性来进行适配，大致思路是根据屏幕的大小，设置相应的CSS。

一、基础题（软能力）

        主要考察面试者的语言表达能力、逻辑思维能力、反应能力、理解能力、协调能力等，一般会在面试开始热身的时候问一两道题。

1、自我介绍

2、换工作的意图，遇到了什么问题，你想要新的公司/团队给你带来什么？

3、为什么选择软件测试这一行，觉得自己有什么优势或劣势？

        沟通能力强，善于与人打交道；

        是一个比较细心且有耐心的人；

        有点强迫症，追求完美；

        爱总结，会将测试过程中发现的问题进行归纳总结，形成经验教训；

        爱学习并且善于学习，能很快掌握新工具的使用；

        综合起来我觉得我是胜任这个工作的。

4、你未来的职业规划？

5、当开发人员说不是bug时，你如何应付？

二、测试理论（基础题）

        主要考察面试者的基本能力，比如测试计划、流程、bug的定义、做过哪些测试。一般我们认为这些能力做的再好都是应该的，不会有加分；但如果做的不好，那就是个不合格的测试工程师了。

1、请描述你上个项目的测试流程？

        参与需求评审->编写测试计划->设计测试用例->用例评审->执行测试用例->缺陷提单->编写测试报告

        细一点的话，可以将冒烟测试-接口测试-UAT用户验收测试等也加入进去，视情况而定。

2、请描述下bug的几个要素？        

      包含：标题、问题描述，详细操作步骤，发现时间，系统环境，硬件环境，严重程度，功能模块，是否会重现，最好提供：有问题的账号、对应的报错截图、或者报错日志等。

3、测试分为哪几个阶段，分别由谁来负责？

        一般来说分为5个阶段：单元测试、集成测试、系统测试、验收测试

        单元测试一般由开发人员进行自测；

        集成测试和系统测试，由测试工程师负责；

        验收测试，则由甲方或者业务方进行验收。

三、移动端测试（专项题）

        如今是移动互联网的天下，大部分公司都有APP应用、小程序、公众号等，做好响应准备是必备的。

1、你是如何做应用的兼容性测试的？

        主要涉及iOS和Android端，

（硬件方面）

        1）设备类型：区分iOS不同机型、Android不同机型、平板电脑、穿戴式设备等；

        2）生产商：Android手机不同厂商会有定制化差异

        3）显示屏：屏幕大小、分辨率、刘海屏、大屏、小屏、折叠屏、曲面屏等

        4）、不同系统（12、13、14、15等）

（软件方面）

        操作系统：安卓不同版本的系统、鸿蒙系统、iOS不同版本的系统等；

 （其他方面）

        1）开发技术、语言的不同：RN、H5、native等；

        2）网络：2G、3G、4G、5G、wifi、弱网等；

        3）用户使用习惯：如大字体的适配、语言的变化（中文、英文、繁体）等。

2、举几个你测试过程中遇到的兼容性问题？

        1）H5页面中CSS样式兼容：样式错乱、布局不灵活、样式便捷处理不好看，导致窄屏手机显示异常等；（一些属性的浏览器标示前缀没有添加，导致默认浏览器不认识这个属性，所以样式错乱）

        2）H5页面缓存问题：页面一直显示修改前的样式，需要强制刷新页面或者清除缓存才生效；

        3）上下滑动卡顿：安卓和大部分iOS手机上下滑动顺滑，小部分iOS手机卡顿等

3、你觉得哪些场景需要做兼容性验证？

• UI显示
• 多次快速点击
• 拉起虚拟键盘挡住输入区
• 虚拟物理按键收起与显示
• 多个输入框来回切换
• 控件焦点热区文体
• 前后台、多个应用切换
• 指纹识别和faceid等
• 框架升级
• 网络
• 新老版本兼容
• 第三方依赖库或者SDK升级
• 前后端版本兼容
• 安装卸载更新

4、有没有遇到过手机崩溃（闪退）？碰到了怎么解决，通常是什么原因造成的？一般怎么抓取日志？

        1）系统不兼容，版本不兼容，导致一安装就闪退；

        2）空指针：对象没有初始化就使用了（点击某个功能的时候闪退）；

        3）代码错误：没有经过测试的新功能，可能会导致App在生产环境中失败等。

四、接口测试

1、在接口测试过程中发现的bug多不多？能举几个例子？

        比如，输入框，在页面上输入负数，肯定是无法提交过去（前端页面会判断金额），如果我不走前端，直接用接口工具发请求，输入一个负数过去。 （假设服务端没做提现金额数据判断） 余额=当前余额（100）-提现金额（-100），那么提现-100，余额就变成200了，也就是越提现，余额越大了。

        1）数字录入框：输入非数字

        2）长度校验：输入超过最大长度、输入空等

2、你们公司的接口测试流程是怎样的？

　　首先是从开发那里拿到API接口文档，了解接口业务、包括接口地址、请求方式，入参、出参，token鉴权，返回格式等信息。

　　然后使用Postman或Jmeter工具执行接口测试，一般使用Jmeter的步骤是这样的：

1）在测试计划下新建一个线程组；

2）添加HTTP请求默认值（输入接口服务器IP和端口）；

3）添加对应的HTTP请求，一个请求一个用例（包括输入接口路径，访问方式，参数等）；

4）然后创建断言和查看结果树；

5）最后调试并执行用例，最后编写接口测试报告。

3、jmeter中如何实现关联？

　　先从上一个接口中通过正则表达式提取器或jsonpath解析器截取下一个接口需要的参数值保存到变量，然后在下一个接口中通过${变量名}去获取。

        Jmeter，JSON提取器【提取满足特定条件的变量值】

4、谈谈你对HTTP协议的了解？

        http：超文本传输协议，端口为80，特点（无记忆功能、快速）是由请求和响应两部分组成。请求由请求头、请求行、请求正文组成；响应是由响应头、响应行、响应正文组成，之前我们公司的接口是采用https协议的。

        https：http+ssl协议，端口443，面向安全的超文本传输协议，较http更安全。    

5、get和post请求有什么区别？

get和post请求都是客户端向服务器提交的一种请求方式

get是明文传输参数、倾向于请求服务器资源。比如打开网站

post传输数据不可见，安全性高，倾向于向服务器提交数据，比如注册等

五、SQL数据库（必备技能）

1、说下左连接和右连接的用法？

        left join （左连接）、right join （右连接）、inner join （等值连接或者叫内连接）、full join （全外连接）

        用法：select * from A表 left join B表 on A.id = B.id; 

2、写一个更新语句？

        update 表A  a set a.phone = '188XXXXXXXX' where a.id = '2212';

3、模糊查询用什么关键词？like

六、Linux（必备技能）

1、说说你常用的linux命令？

2、查日志一般用什么命令？tail 

3、查日志时，搜索关键词的命令？

        tail -f log |grep '188XXXXXXXX'

4、如何查看进程，CPU使用率？top

七、敏捷开发模式（项目模式）

1、有做过敏捷项目吗，和传统的项目有什么区别，使用了什么措施？

        敏捷项目：每日站会，看板监控，燃尽图，开短会，计划发布，迭代复盘会议等，

        敏捷相对于传统项目迭代会更快，一般2周一个迭代，快速响应需求，需求变更频繁等。

2、敏捷测试下的工作流程？

        1）更侧重于用x-mind编写测试场景，进行测试场景评审，减少测试用例、测试计划等工作的比重

        2）在前后端联调期间即进行接口测试，尽早开始测试；

        3）关注持续迭代的新功能，针对新功能进行足够的SIT测试；

        4）引入探索性测试，由于时间原因，一般只进行一轮回归测试等。