移动端兼容性处理1

移动端 HTML5 audio autoplay 失效问题

由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。

解决方法:

先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。

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

 

Fixed错误

浮动(固定)的元素,在浏览器窗口大小改变(输入键盘弹出关闭),交互时,定位属性会变得异常。位置错位或者消失等等。

影响:

所有移动浏览器。

解决方法:

1. 复杂交互页面尽量避免fixed元素。
2. 在input元素页面,禁止使用fixed元素。

 

Video全屏Zindex失效

zindex无效,视频video始终在最上方。

影响:

很多国内浏览器不兼容

解放方法:

设计时避免视频元素与其他元素可能会出现的重叠问题。

 

IOS里点击select标签,浏览器会退出

当<select>里没有<option>标签的时候,用户点击<select>,浏览器会强制退出。

影响:IOS系统的浏览器

解决方法:

在<select>里加入<option>元素,保证有元素存在。

 

js使用touchstart事件没法调用手机键盘

js使用touchstart事件,对表单使用focus( )方法,对表单获得焦点,没办法调用手机的键盘。

影响:

Android系统的浏览器。

解决方法:

改用js的onclick事件

 

iOS Safari 委托事件绑定在document的事件失效

Safari浏览器下对document进行委托事件的绑定,会失效。

影响:

Safari 对click事件定义只能冒泡到body下面的子节点,所以委托在document上得click事件不会被触发。

解决方法:

为body的子节点添加click事件可以解决。

 

Android中元素被点击时产生的边框

点击一个链接,会出现一个边框或者半透明灰色遮罩。

影响:

android手机

解决方法:

设置`-webkit-tap-highlight-color`的alpha值为0去除部分机器自带的效果。

 

去除移动端输入框内阴影

在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭。

影响:

ios系统的手机

解决方法:

input,
textarea {
  border: 0; /* 方法1 */
  -webkit-appearance: none; /* 方法2 */
}

 

禁止选中内容

如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉。

.div {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all (移动端不需要) */
  -ms-user-select: none;      /* IE 10+ */     
}

 

posted @ 2015-09-14 08:52  莫扬的天空  阅读(1156)  评论(0编辑  收藏  举报