IOS click 事件 300ms 延迟问题

这个起因是由于区分单击和双击的历史原因造成的。

解决方案:

  • 引入 fastclick
  • 触摸事件的响应顺序为 touchstart –> touchmove –> touchend –> click,也可以通过绑定 ontouchstart 事件,加快对事件的响应

Android4.4 以下图片无法使用 base64

1px 问题

这个问题基本上是个老生常谈的问题,可以看下我的博客详细描述了如何解决 1px 的问题 1px

兼容刘海屏

可以看下这篇文章 兼容 iphone x * 刘海的正确姿势

css 动画卡顿

  • 尽可能地使用合成属性 transform 和 opacity 来设计 CSS3 动画,不使用 position 的 left 和 top 来定位
  • 开启硬件加速
1
2
3
4
5
6
 {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

requestAnimate 兼容

在日常开发中如果遇到 CSS 无法完成的动画(比如页面滚动),通常的解决方案就是使用setInterval设置定时器来实现动画特效,但是定时器不是那么可靠,存在误差。

一般情况下,每秒平均刷新次数能够达到 60 帧,就能够给人流畅的体验,即每过 1000/60 毫秒渲染新一帧即可,光靠定时器是无法保证的。requestAnimationFrame就是解决这个问题的。在日常开发中,这个 api 是个很有用的帮手。关于它的兼容引入这段代码就可以了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
;(function() {
var lastTime = 0
var vendors = ['ms', 'moz', 'webkit', 'o']
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame']
}

if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime()
var timeToCall = Math.max(0, 16 - (currTime - lastTime))
var id = window.setTimeout(function() {
callback(currTime + timeToCall)
}, timeToCall)
lastTime = currTime + timeToCall
return id
}

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id)
}
})()

fixed 定位问题

IOS 下 fixed 元素容易定位出错,软键盘弹出时,影响 fixed 元素定位。这里引用一下这篇经典文章
移动端 Fixed 布局的解决方案

Input 的 placeholder 会出现文本位置偏上的情况

设置 line-height:normal

禁止长按复制和缩放

在 app 里内嵌的一些网页有时候我们是不需要长按复制这些功能的,可以这样禁止:

1
2
3
4
5
6
7
8
.no-touch {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

缩放可以这样禁止:

1
2
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
/>

移动端适配

可以参考一下淘宝团队出的 Flexible 方案,接触了几个大厂,基本是比较主流的适配方案:
使用 Flexible 实现手淘 H5 页面的终端适配

部分 Android 系统中元素被点击会产生边框

解决方案:

1
2
3
4
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}

audio 问题

这块不经常接触,但是 IOS 下考虑到用户体验问题,限制 audio 必须在用户主动交互之后才能够播放。

解决方案:提前创建 audio 标签,用户交互之后触发自动播放

转载请保持原始链接

原始链接: https://ru23.com/note/5d938461.html