移动端兼容性

javascript
  目录
  1. 1. 移动端兼容性
    1. 1.1. meta标签
    2. 1.2. body,img等标签
    3. 1.3. 图片不清晰
    4. 1.4. 表单的标签
    5. 1.5. a标签
    6. 1.6. button
    7. 1.7. audio和video
    8. 1.8. click点击事件
      1. 1.8.1. 300毫秒延迟
      2. 1.8.2. ios(label,span)监听click事件,不触发
  2. 2. css部分
    1. 2.1. @-webkit-keyframes 注意
    2. 2.2. border-radius 注意
    3. 2.3. 解决 transition 闪屏
    4. 2.4. 阻止用户调整微信浏览器字体大小
    5. 2.5. 屏幕旋转的事件和样式
    6. 2.6. fixed元素无法点击
    7. 2.7. overflow
    8. 2.8. ios阻止旋转屏幕时自动调整字体大小
    9. 2.9. 通过transform进行skew变形，rotate旋转会造成出现锯齿现象
    10. 2.10. iOS6下伪类:hover
    11. 2.11. 点击按钮时背景变黑色的解决
    12. 2.12. retina屏下border的1px会变粗
  3. 3. iphoneX兼容补充
  4. 4. 微信浏览器&&安卓&&ios禁止页面下拉刷新

移动端有关html标签节点的兼容性问题

移动端兼容性

meta标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// viewport就啥也不说了，必须得加
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

// 启动或禁用自动识别页面中的电话号码
<meta name="format-detection" content="telephone=no" />

// 启动或禁用自动识别邮箱地址
<meta name="format-detection"  content="email=no" /> 

// 设置 Web 应用是否以全屏模式运行。
<meta name="apple-mobile-web-app-capable" content="yes">

// ios 的 safari 顶端状态条的样式，可选的参数有：default、black、black-translucent
<meta name="apple-mobile-web-app-status-bar-style"  content="black" />

// winphone 系统 a、input 标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight"  content="no">

body,img等标签

1
2
3
4
5
6
7
8
9
// 禁止 ios 长按时不触发系统的菜单，禁止 ios&android 长按时下载图片
.css {
  -webkit-touch-callout: none
}

// 禁止ios和android用户选中文字
.css {
  -webkit-user-select:none
}

图片不清晰

1
2
3
4
5
6
7
8
9
10
11
12
13
// 比如，iphone6，设备款375，物理像素750，正常一张占1/3屏幕的图片，125px，如果准备一张125的
// 肯定会模糊，必须准备250px的。如果像iphone6 plus，像素比3， 占1/3的图片138px，实际需要414px。
// 解决方案：
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .css {
      background-image: url('2x.png');
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .css {
      background-image: url('3x.png');
    }
}

表单的标签

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// input 输入框不可编辑
<input type="text" name="name" value="xxx" disabled="true"/>
<input type="text" name="name" value="xxx" readonly="true"/>
/* disabled 文本框变灰，通过request.getParameter("name")得不到文本框中的内容
readonly 只是使文本框不能输入，样式没有变化，通过request.getParameter("name")可以得到内容 */

// ios 输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />

// android 上去掉语音输入按钮
input::-webkit-input-speech-button {
  display: none
}

// ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0;)
  -webkit-user-modify:read-write-plaintext-only;
} 
/* -webkit-user-modify 这个属性使用需谨慎，副作用就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类，不使用a或者input标签，直接用div标签 */

// 表单元素的默认外观重置
  -webkit-appearance:none;

// 修改表单输入框 placeholder 的颜色值
  input::-webkit-input-placeholder{color:#ccc;} 
  input:focus::-webkit-input-placeholder{color:#eee;} 
// 注意 placeholder,  ios 可以换行，android 不可以

// Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

// 禁用 select 默认下拉箭头
select::-ms-expand {display: none;} 

// 禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { 
  display: none; 
}

a标签

1
2
部分安卓手机 a 标签用作按钮的时候，页面显示空白
解决办法：用 button 标签替换 a 标签

button

1
2
3
4
5
6
7
8
9
10
// 去除button在ios上的默认样式
.css {
  -webkit-appearance: none;
  border-radius: 0 
}

// 不想让按钮touch时有蓝色的边框     
.css {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

audio和video

1
2
3
4
5
6
7
8
9
10
11
12
13
// 在ios和andriod中,audio元素和video元素在无法自动播放
// 应对方案：触屏即播
$('html').one('touchstart',function(){
    audio.play()
})

// ios 视频默认全屏播放，如何阻止全屏播放－ webkit-playsinline
<video id="video" src="" webkit-playsinline poster="" ></video>

// 视频，音频获取播放结束后的回调函数－ended
$('#video').on('ended',function(){
  alert(0);
});

click点击事件

300毫秒延迟

1
2
3
4
// 300毫秒延迟解决方案
1.fastclick可以解决在手机上点击事件的300ms延迟
2.zepto的touch模块，tap事件也是为了解决在click的延迟问题
3.触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

ios(label,span)监听click事件,不触发

1
2
3
4
// 所监听元素加上
.css {
  cursor:pointer
}

css部分

@-webkit-keyframes 注意

1
2
以0%开始100%结束，0%的百分号不能去掉
after和before伪类无法使用动画

border-radius 注意

1
2
3
不支持%单位
三星 Galaxy S4中自带浏览器不支持 border-radius 缩写
同时写入 border-radius 和背景色的时候，背景色会溢出到圆角以外部分

解决 transition 闪屏

1
2
3
4
5
6
.css{ 
  /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ 
  -webkit-transform-style: preserve-3d; 
  /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ 
  -webkit-backface-visibility: hidden; 
}

阻止用户调整微信浏览器字体大小

1
2
3
4
// ios 管事，android 暂无解决方案
body{
  -webkit-text-size-adjust: 100%!important;
}

屏幕旋转的事件和样式

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
// 1. 事件
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；
// 代码判断
window.onorientationchange = function(){ 
  switch(window.orientation){ 
    case -90: 
    case 90: 
        alert("横屏:" + window.orientation); 
    case 0: 
    case 180: 
        alert("竖屏:" + window.orientation); 
    break; 
    } 
}

// 2. 样式
/*竖屏时使用的样式*/ 
@media all and (orientation:portrait) {
  .css{} 
}

/*横屏时使用的样式*/ 
@media all and (orientation:landscape) {
  .css{}
}

fixed元素无法点击

1
2
3
4
5
6
7
场景：父元素设置position: fixed;
子元素设置position: absolute;
此时，如果父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。
视觉(view)层并没有出现遮挡，只是无法触发绑定在该子元素上的事件。可理解为：「看到点不到」。
补充： 页面往下滚动，触发position: fixed;的特性时，才会出现这个bug，在最顶不会出现。
测试平台： 小米1S，Android4.0的Chrome18
解决办法： 把父元素和子元素的overflow: hidden去掉。

overflow

1
2
3
4
body如果设置height:100%;overflow:hidden是依然可以滑动的，如果需禁止，
要再加一层div设置 height:100%加overflow：hidden（html,body加height:100%） ，
这样元素超出body的高度也不能滑动了。
或者同时给html，body加height:100%;overflow:hidden

ios阻止旋转屏幕时自动调整字体大小

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

通过transform进行skew变形，rotate旋转会造成出现锯齿现象

1
2
3
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)

iOS6下伪类:hover

1
2
3
4
5
除了<a>之外的元素无效；在Android下则有效。类似
div#topFloatBar_l:hover #topFloatBar_menu {
  display:block; 
}
这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

点击按钮时背景变黑色的解决

1
2
3
4
5
6
7
8
9
10
// 点击按钮时背景变黑色的解决
-webkit-tap-highlight-color: transparent;

// 当我们去掉默认的大黑块儿后，要添加自己想要的点击时按住按钮的效果，用以下代码：
span:active{
  box-shadow: inset 0 5px 10px #B41313,inset 0 -5px 10px #B41313;
}
// 添加完上述代码后，在安卓上，都可以看到想要的效果，但是iphone上依旧不行，
// :active  需要一个触发事件才可以，于是乎，用以下代码：
document.body.addEventListener('touchstart', function () {});

retina屏下border的1px会变粗

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 因为像素比，比如，iphone6的像素比是2，window.devicePixelRatio可以查看，
// iphone6的设备宽是375,而物理像素是750，在css中的1px，实际控制的是2px的像素，
// 所以看起来会变粗了

// 解决一：IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

// 解决二：background渐变
// 背景渐变, 渐变在透明色和边框色中间分割, frozenUI用的就是这种方法, 借用它的上边框写法:
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .ui-border-t {
        background-position: left top;
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));
    }
}

// 解决三：
// :before, :after与transform
.radius-border{
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .radius-border:before{
        content: "";
        pointer-events: none; /* 防止点击触发 */
        box-sizing: border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border-radius: 8px;
        border:1px solid #999;
        -webkit-transform(scale(0.5));
        -webkit-transform-origin: 0 0;
        transform(scale(0.5));
        transform-origin: 0 0;
    }
}

iphoneX兼容补充

iphoneX适配

微信浏览器&&安卓&&ios禁止页面下拉刷新

1
2
3
4
5
6
7
8
9
// css
body {
  touch-action: none;
} 
// js
document.body.addEventListener('touchmove', (e) => {
  e.preventDefault();
  e.stopPropagation();
}, { passive: false });
  移动端   兼容性