兼容性

ios 输入框默认阴影

input, textarea {
    -webkit-appearance: none;
}

1
2
3

点击元素时出现半透明灰色的遮罩层

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

1
2
3

Transition 闪屏

div {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

1
2
3
4

部分 android 手机圆角无效

div {
    background-clip: padding-box;
}

1
2
3

Skew、rotate 出现锯齿现象

div {
    outline: 1px solid rgba(255,255,255,0)
}

1
2
3

ios 点击出现 300ms 延迟

fastclick、使用 tap 替换 click

播放器无法自动播放

document.addEventListener('touchstart', function() {
    document.getElementsByTagName('audio')[0].play()
    document.getElementsByTagName('audio')[0].pause()
})

1
2
3
4

ios 滚动卡顿

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

1
2
3

长时间按住页面出现闪退

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

1
2
3

开启 3d 硬件加速

div {
    webkit-transform: translate3d(0,0,0);
}

1
2
3

ios 非可点击元素绑定点击事件无效

div {
    cursor: pointer;
}

1
2
3

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust: none;
}

1
2
3

ios 输入框的 placeholder 没有垂直居中，而是略靠上

input {
    height: 40px;
    line-height: 40px; /**设置为与高度一致**/
}

1
2
3
4

ios 输入框 type=number 无效

<input type="tel"/>

fixed、absolute 受 translate 影响而移动，使用时请注意
弹出层出现后阻止外出滚动

body {
    overflow: hidden;
}
/**
    切换 overflw: hidden/visible 
    或者将弹框设置为 fixed，关闭后恢复成 static
**/
.mask {
    position: fixed; 
    top: 0px; 
    left: 0px;
    right: 0px; 
    bottom: 0px;  
    z-index: 999;  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

← 屏幕适配方案实现“登录 | 注册”效果 →

# 兼容性

兼容性