---

一、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 = thisconst originalHeight = document.documentElement.clientHeight || document.body.clientHeightwindow.onresize = function () {const resizeHeight = document.documentElement.clientHeight || document.body.clientHeightif (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", () => {// 软键盘弹出的事件处理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;

11、iOS 适配底部小横条（Android 机上也可以调出这个小横条的）

此方案亦可解决：H5 嵌入式开发时，让页面适配端上提供的组件。

iOS 底部有个小横条，如何保证内容不被横条遮挡呢？最好的办法就是用 CSS 来做下兼容。

第一步：需要在 index.html 文件中的 <mate> 标签中增设 viewport-fit 属性来改变网页在可视窗口的布局方式

viewport-fit 属性是 iOS11 新增的特性。苹果公司为了适配 iPhoneX 对现有 viewport meta 标签新增加的一个扩展，用于设置网页在可视窗口的布局方式。

viewport-fit 可设置三个值：

• auto：默认值，效果与 contain 一样。
• contain：可视窗口完全包含网页内容（类似于给 <img> 设置：object-fit: contain;）。
• cover：网页内容完全覆盖可是窗口（类似于给 <img> 设置：object-fit: cover;）。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

第二步：在需要兼容的页面中用 env() 和 constant() 这两个 CSS 函数来设定安全区域以及边界的距离。

env() 和 constant() 是 iOS11 新增的两个 CSS 特性，用来设定安全区域以及边界的距离。

env() 和 constant() 可设置四个值：

• safe-area-inset-left：安全区域离 左边 边界的距离。
• safe-area-inset-right：安全区域离 右边 边界的距离。
• safe-area-inset-top：安全区域离 顶部 边界的距离。
• safe-area-inset-bottom：安全区域离 底部 边界的距离。

.box {position: fixed;bottom: 0;left: 0;width: 100%;height: 3.87rem;padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS>=11.2 */
}

【注意】constant 和 env 的先后顺序不能换。

【参考文献】网页适配 iPhoneX，就是这么简单

12、iOS 中字体加粗无效 Android 正常

这是我遇到的一个问题，当时去掉 font-family 就好了。

13、iOS 下拉页面时，自定义的头部导航栏消失了

因为，iOS 自带的回弹特效不会触发 scroll 事件，也就导致 scrollTop 的值为 undefined。需要做一个兼容：默认是 0 就好了——let scrollTop = e.target.scrollTop || 0。

三、html 兼容

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

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

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

前端 iOS 和 Android 的兼容问题相关推荐

1. 前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案

   相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和io ...

2. 前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案...

   相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和io ...

3. android byte转string_高性能AES256对称加解密，兼容Java、IOS、Android

   最近在设计一个给IOS和Android提供接口的项目框架,在接口安全上准备使用常规的加密技术,确保在非法访问接口的情况下拿到的数据一时半会也没用. 查了相关的资料,用的最多的几种加密算法,DES.AE ...

4. select设置text的值选中（兼容ios和Android）基于jquery

   前一段时间改了一个bug,是因为select引起的.当时我没有仔细看,只是把bug改完了就完事了,今天来总结一下. 首先说option中我们通常会设置value的属性的,还有就是text值的,请参见下 ...

5. new Date兼容iOS和Android

   new Date兼容iOS和Android 后端接口返回日期格式:YYYY-MM-DD HH:mm:ss 前端直接拿过来 const date = new Date('2020-11-13 11:28 ...

6. jquery 属性选择android,select设置text的值选中（兼容ios和Android）基于jquery

   前一段时间改了一个bug,是因为select引起的.当时我没有仔细看,只是把bug改完了就完事了,今天来总结一下. 首先说option中我们通常会设置value的属性的,还有就是text值的,请参见下 ...

7. android 仿ios tabs,React Native兼容iOS Android的TabBar

   tabbar 最近着手开发的一个兼容iOS.Android的TabBar.还在不断开发中. 欢迎fork,欢迎star. :p 自己捣鼓了个E文的readme,没啥难度凑合可看. react-nati ...

8. ios和Android样式不兼容（待更新）

   ios和Android样式不兼容 ::after在ios中不显示

9. 【h5移动端页面调起手机sms批量发送短信，兼容ios和android】

   移动端h5页面调起手机发送短信功能,实现批量发送生日祝福模板,苹果和安卓的兼容写法不一样. 先判断是ios还是android,拼接的写法不一样 android是sms:188XXXXXXXX,134X ...

最新文章

1. Spring+XFire WS-Security安全认证开发感悟
2. arthas使用示例：trace追踪方法调用路径及统计方法耗时
3. 事件处理之一：两种方式：监听器与回调
4. Android游戏开发系统控件-CheckBox
5. .net生成文字图片
6. 关于爬虫本地JS Hook的研究
7. Markdown编辑LaTeX数学公式
8. Python多线程（threading模块）
9. 由争议拼多多之货找人想到的 BlockChain Storage 之5、区块链存储 - 存储供需的智能匹配...
10. Understand(代码分析工具)的安装与使用教程
11. Android 显示软键盘输入法和强制隐藏软键盘输入法
12. Advice for applying machine learning - Diagnosing bias vs. variance
13. python三维立体画_用matplotlib创建三维立体图
14. 线程之interrupt
15. 云栖大会·南京峰会落下帷幕，阿里云都干了些什么？
16. 第 5-5 课： 如何打包部署 Spring Boot 项⽬
17. 第六章 ES高级搜索—聚集查询（上）
18. matlab求零空间,有关线性代数的Matlab代码笔记（2）行空间、零空间
19. 支持纳管Redis数据库，支持查看、连接和会话审计Kubernetes Pod，JumpServer堡垒机v2.18.0发布
20. js+css实例超漂亮tab切换选项卡代码

热门文章

1. 电工技术(1)-电路的基本概念与基本定律
2. access主窗体名词解释_access名词解释和简答题.doc
3. Vue小黑记事本案例
4. 周六日闲暇之余，做一些轻松浪漫的事情 二
5. 行车记录仪处理器仪芯片排行_每个人都应该有一个行车记录仪
6. Google Chrome无法访问网站的原因与解决办法
7. 发现一款程序员实用小工具
8. 商业智能 BI 跟业务系统的思维差异
9. C#HttpUtility.UrlEncode大写问题
10. java短信验证 网易_网易短信java实现