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
为失效的元素设置样式