IOS手机端兼容问题

发表于 更新于 分类于

去除 ios 页面的 input、textarea 的自带效果（阴影、等）

1
2
3
4
input,
textarea {
  -webkit-appearance: none;
}

iOS 系统上常常能看到高斯模糊(Gaussian Blur)效果。

1
2
/* 只支持ios端；只作用于当前元素；到目前为止，仅有Safari浏览器支持，而且还需要添加前缀：-webkit-backdrop-filter*/
backdrop-filter：blur(10px);

屏蔽 ios 和 android 下点击元素时出现的阴影

1
2
/* 可以同时屏蔽ios和android下点击元素时出现的阴影。备transparent的属性值在android下无效。 */
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

改掉 ios 默认的曲边框

1
border-radius: 0;

文本框输入

当文本框只能输入数字是一个很常见的需求，比如电话号码，身份证号，卡号， 数量….等等只允许数字输入，为了更好的用户体验性，直接写出 启动数字键盘的需求

1
2
3
4
5
6
this.style.imeMode='disabled';
/* imeMode有四种形式，分别是：*/
/* active 代表输入法为中文*/
/* inactive 代表输入法为英文*/
/* auto 代表打开输入法 (默认)*/
/* disable 代表关闭输入法*/

问题： 发现在 Android 手机上是不行的
解决办法： html5 里的 input 的 type 属性可设置为 number

1
2
<!-- 弹出数字键盘 -->
<input type="number" />

IOS 11.2.2 以下系统键盘弹起遮挡输入框的问题

首先要修改底部定位元素 fixed 为 absolute
接下来 JS 未输入框绑定聚焦事件，当输入框聚焦时，执行如下代码:

1
2
3
4
5
6
7
8
var str = navigator.userAgent.toLowerCase();
var ver = str.match(/cpu iphone os (.\*?) like mac os/); //ver 是当前 IOS 系统版本号
var arr = ver[1].replace(/\_/g, ".").split(0);
if (arr[0] < 11 || (arr[0] > 11 && arr[2] > 1)) {
  setTimeout(function () {
    $(window).scrollTop(1000);
  }, 500);
}

这个解决方法还是会有一个小问题，那就是键盘弹起时不太流畅