前端面试题目收集（持续更新）

移动端面试复习

引言

最近在很多面试中都问到移动端的问题，暴露了我平时工作中对移动端经验不足的问题，但是天赋不够能力来凑，通过一些面试准备还是能够能混过关的，我希望在这里以问题为导向，探究下移动端的一些问题

一、移动端和pc端的区别

1. 兼容性不同： pc向下考虑IE兼容，移动端更多考虑是手机兼容，如一些手机屏幕大小和分辨率的兼容
2. 部分事件不同：移动端多出触屏事件，没有hover事件
3. 部分场景不同：移动端手机软键盘
4. 布局要求不同：移动端往往要求做到自适应
5. 平台区别：移动端可能要依托小程序、微信公众号平台进行开发，pc端比较纯粹
6. 性能要求不同：移动端对首屏加载速度，用户响应延迟、渲染性能、动画帧率要求比较高

二、点击穿透问题

假如页面上有两个元素A和B。

B元素在A元素之上。

我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。

我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

原因： 这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

解决方案：

1. 只用touch，简单完美
2. 只用click，副作用大
3. tap后延迟350ms再隐藏mask
4. 禁用缩放，不会有延迟
5. 更改默认视窗宽度为自适应
6. 引入插件，如：fastClick

移动端300ms点击延迟：

移动端300ms点击延迟由来：

苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。

这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。

如果只针对300ms点击延迟，有如下解决方案：

1. 禁用缩放

   在meta加入以下信息，表明页面不可缩放，从而可以移动端浏览器自动禁掉默认300ms点击延迟

   <meta name="viewport" content="user-scalable=no">
   <meta name="viewport" content="initial-scale=1,maximum-scale=1">

   缺点：完全禁用缩放影响用户体验

2. 更改默认的视口宽度

   一开始，为了让桌面站点能在移动端浏览器正常显示，移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度，通常是设固定值980px。现在我们可以通过以下标签来设置视口宽度为设备宽度。

   <meta name="viewport" content="width=device-width">

   如果能够识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。

3. touch-action

   CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。

   最常见的用法是禁用元素（及其不可滚动的后代）上的所有手势，以使用自己提供的拖放和缩放行为（如地图或游戏表面）。如：

   #map {
     touch-action: none;
   }

参考

三、移动端软键盘弹窗影响布局怎么解决

1. 当在移动端按钮position:fixed;底部bottom:0;

   固定在底部的按钮会被系统自带的键盘挤上去，占用输入框位置,如下

   

   解决：通过resize() 方法触发 resize 事件，当唤起键盘页面高度小于未唤起键盘页面高度时，取消fixed

2. 安卓端，移动端页面输入底部被键盘遮挡问题

   解决：

   • 通过 window.onresize 监听页面大小变化，然后通过 window.scrollTo 使页面滚动到所需位置

   • 通过 Element.scrollIntoView()

   • 通过 Element.scrollIntoViewIfNeeded()

     参考

     参考

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1249118795@qq.com