Web移动端面试常见问题汇总以及参考链接

1、click 在 ios 上有 300ms 延迟，原因及如何解决？

原因
移动端浏览器会有一些默认的行为 ，比如双击缩放、双击滚动，而在用户对页面进行操作的时候，移动端浏览器会优先判断用户是否要触发默认的行为。所以会有延迟。

解决办法
(1) 粗暴型，禁用缩放

 <meta name="viewport" content="width=device-width, user-scalable=no">

(2)利用 FastClick
其原理是： 检测到 touchend 事件后，立刻出发模拟 click 事件，并且把浏览器 300 毫秒之后真正出 发的事件给阻断掉。

(3)利用touchstart
触摸屏的相应顺序为touchstart–>touchmove–>touchend–>click，也可以通过绑定ontouchstart事件，加快事件的响应，解决300ms的延迟问题

2、移动端中viewport的理解

参考地址：https://blog.csdn.net/yiyueqinghui/article/details/86606929

3、移动端中px、em、rem、vw、vh、vmax、vmin的区别

参考地址：https://blog.csdn.net/yiyueqinghui/article/details/107324083

4、知道 PWA 吗

PWA 全称 Progressive Web App，即渐进式 WEB 应用。
一个 PWA 应用首先是一个网页，可以通过 Web 技术编写出一个网页应用。随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。

5、移动端适配 1px 的问题

参考链接：https://blog.csdn.net/yiyueqinghui/article/details/121619673

6、移动端性能优化相关经验

参考链接：https://blog.csdn.net/tangxiujiang/article/details/79791545

7、常见移动端兼容性问题

参考链接：https://blog.csdn.net/yiyueqinghui/article/details/121620876

8、如何解决上下拉动滚动条时卡顿、慢

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

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

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

10、ios 和 android 下，如何解决触摸元素时出现半透明灰色遮罩

element {
	-webkit-tap-highlight-color: rgba(255,255,255,0); 
}

11、消除transition引起的闪屏

.box {
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

12、如何解决 Android手机圆角失效问题?

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