前端 iOS 和 Android 的兼容问题

目录 一、javascript 兼容1、iOS 日期的兼容2、iOS 的 beforeunload 事件的兼容3、Android 下，点击 input 框键盘将页面顶起4、iOS 点击 input 框键盘将底部按钮顶起，正常需要隐藏底部按钮5、iOS 键盘收起，页面底部出现空白问题6、Android 和 iOS 下，表单的 input 事件和 change 事件 二、css 兼容1、iOS 下，input 框聚焦时出现 outline 或者阴影2、Android 和 iOS 下，设置 input 框禁止选择内容3、iOS 改变 input 框的默认 placeholder 属性样式4、iOS 下，input 框输入的内容偏上5、Android 下 line-height 和 height 的兼容6、iOS 下，解决 “input 按钮” 样式会被默认样式覆盖的问题7、iOS 下，阻止图片在 微信 里被点击放大8、Android 下，margin-top 失效9、Android 下页面出现横向滚动条，iOS 正常10、Android 下给页面设置 fixed 固定定位无效，iOS 正常 三、html 兼容1、iOS 下，会将数字当成电话号码，导致变色

---

一、javascript 兼容 1、iOS 日期的兼容

ios 下 new Date('2020-03-11 00:00:00') 不生效，需要对日期进行 date.replace(/-/g, '/') 处理。

2、iOS 的 beforeunload 事件的兼容

ios 下 beforeunload 事件废弃了，需要使用 pagehide 事件替代。

3、Android 下，点击 input 框键盘将页面顶起

// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @focus="focus" />
// ... 
focus () {
  const u = navigator.userAgent;
  const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; // 判断机型，android终端
  if (isAndroid) {
    const that = this
    const originalHeight = document.documentElement.clientHeight || document.body.clientHeight
    window.onresize = function () {
      const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
      if (resizeHeight - 0 < originalHeight - 0) {
        that.$refs.input.style.bottom = `-${originalHeight - resizeHeight}px`
      } else {
        that.$refs.input.style.bottom = `0px`
      }
    }
  }
},

4、iOS 点击 input 框键盘将底部按钮顶起，正常需要隐藏底部按钮

因为是点击input后触发的问题，所以应该在input聚焦时处理，也就是放在focus事件中改变页面的top值。
下面是解决该问题的大概的模板：

// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @focus="focus" />
// ...
focus () {
  const u = navigator.userAgent;
  const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // 判断机型，ios终端
  if (isiOS) {
    document.body.addEventListener("focusin", () => {
      // 软键盘d出的事件处理
      this.isShowFooterBar = false;
    });
    document.body.addEventListener("focusout", () => {
      // 软键盘收起的事件处理
      this.isShowFooterBar = true
    });
  }
}

【拓展】
ios：focusin 和 focusout 事件支持冒泡，分别对应 focus 和 blur 事件。
上面的方法中，之所以使用 focusin 和 focusout 的原因是：假设有多个输入框需要处理，这样就可以使用事件代理来处理多个输入框存在的情况了。

5、iOS 键盘收起，页面底部出现空白问题

// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @blur.prevent="blur" />
// ...
blur () {
  window.scrollTo(0, 0)
}

6、Android 和 iOS 下，表单的 input 事件和 change 事件

ios11之后，有些情况使用 input 事件 ios 自带的输入法，当选择拼音输入时会自动输入多个字符，这是因为有时 ios 对 input 事件不兼容导致的，使用 change 事件即可解决这个问题。

ios 收起输入法时会失去焦点，触发 change 事件，但是 Android 收起输入法时并不会失去焦点，所以可以通过判断 UA（navigator.userAgent） 的方式来针对不同系统使用不同的事件。

二、css 兼容 1、iOS 下，input 框聚焦时出现 outline 或者阴影

input:focus{outline:none}  // 去除外边框
input:{-webkit-appearance: none;}

2、Android 和 iOS 下，设置 input 框禁止选择内容

// android 中这样实现
input {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
// ios 中应当将上述样式中的属性 -webkit-user-select 的值由 none 改为 auto
input {
  -webkit-user-select: auto;
}

3、iOS 改变 input 框的默认 placeholder 属性样式

input::-webkit-input-placeholder {
  color: #bbb;
  font-size: 0.3rem;
  line-height: normal;
}

4、iOS 下，input 框输入的内容偏上

// 给你 input 去除 line-height 属性，然后添加下面的样式
input::-webkit-input-placeholder {
  line-height: normal;
}

5、Android 下 line-height 和 height 的兼容

对于一般PC浏览器以及iOS设备的浏览器表现就是我们想要的居中效果，但是大部分 Android 设备的浏览器文字都会稍微向上偏离。
结合行高、对齐的关系 和 伪元素，可以给当前元素添加以下样式来尝试解决该问题：

&::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin-top: 1px;
}

6、iOS 下，解决 “input 按钮” 样式会被默认样式覆盖的问题

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

7、iOS 下，阻止图片在 微信 里被点击放大

img { pointer-events: none; }

8、Android 下，margin-top 失效

给其父元素添加 padding-top，代替该元素的 margin-top。

9、Android 下页面出现横向滚动条，iOS 正常

给该元素设置：

overflow-x: hidden;

10、Android 下给页面设置 fixed 固定定位无效，iOS 正常

给该元素设置：

position: fixed;
left: 0;
top: 0;

三、html 兼容 1、iOS 下，会将数字当成电话号码，导致变色

<meta name="format-detection" content="telephone=no"> 
<meta http-equiv="x-rim-auto-match" content="none">

【参考】
H5 软键盘 兼容方案
前端ios和安卓的兼容性问题
web前端兼容性问题总结
ios兼容性问题