移动端兼容性处理1

昵称10504424 2015-09-14

展开全文

移动端 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+ */     
}