前端 iOS 和 Android 的兼容问题_移动端兼容安卓和ios重置样式-程序员宅基地

技术标签: 兼容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", () => {
    
      // 软键盘弹出的事件处理
      this.isShowFooterBar = false;
    });
    document.body.addEventListener("focusout", () => {
    
      // 软键盘收起的事件处理
      this.isShowFooterBar = true
    });
  }
}

【拓展】
ios:focusinfocusout 事件支持冒泡,分别对应 focusblur 事件。
上面的方法中,之所以使用 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兼容性问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mChales_Liu/article/details/122193185

智能推荐

一个ngrok如何穿透多个端口?_ngrok多个端口-程序员宅基地

文章浏览阅读2.7k次,点赞2次,收藏4次。如何不充钱就可以穿透多个端口?./ngrok authtoken 授权码之前这个操作的生成的yml文件中修改 端口可添加多个addr:port端口可随意配置_ngrok多个端口

C语言 char转uint8_t-程序员宅基地

文章浏览阅读5.9k次。char转uint8_t:static int char2uint(char *input, uint8_t *output){ for(int i = 0; i < 24; i++) { output[i] &= 0x00; for (int j = 1; j >= 0; j--) { char hb = input[i*2 + 1 - j]; if (hb >= '0' &..._char转uint8_t

android 陀螺仪简单使用,判读手机是否静止状态_安卓陀螺仪多少才算静止-程序员宅基地

文章浏览阅读6.5k次,点赞5次,收藏13次。陀螺仪允许您在任何给定时刻确定Android设备的角速度。简单来说,它告诉您设备绕X,Y和Z轴旋转的速度有多快。最近,即使是预算手机正在制造,陀螺仪内置,增强现实和虚拟现实应用程序变得如此受欢迎。通过使用陀螺仪,您可以开发可以响应设备方向的微小更改的应用程序。创建陀螺仪对象和管理器manager// Register it, specifying the polling interv..._安卓陀螺仪多少才算静止

lib静态库逆向分析_libtersafe-程序员宅基地

文章浏览阅读4.7k次,点赞3次,收藏16次。当我们要分析一个lib库里的代码时,首先需要判断这是一个静态库还是一个导入库。库类型判断lib文件其实是一个压缩文件。我们可以直接使用7z打开lib文件,以查看里面的内容。如果里面的内容是obj文件,表明是静态库。如果里面的内容是dll文件,表明是导入库。导入库里面是不包含代码的,代码包含在对应的dll文件中。从lib中提取obj静态库是一个或者多个obj文件的打包,这里有两个方法从中提取obj:Microsoft 库管理器 7z解压Microsoft 库管理器(li_libtersafe

Linux的网络适配器_linux 查询网络适配器-程序员宅基地

文章浏览阅读5.3k次,点赞3次,收藏3次。了解一下,省的脑壳痛 桥接模式对应的虚拟网络名称“VMnet0” 桥接模式下,虚拟机通过主机的网卡进行通信,若物理主机有多块网卡(有线的和无线网卡),应选择桥结哪块物理网卡桥接模式下,虚拟机和物理主机同等地位,可以通过物理主机的网卡访问外网(局域网),一个局域网的其他计算机可以访问虚拟机。为虚拟机设置一个与物理网卡在同个网段的IP,则虚拟机就可以与物理主机以及局域..._linux 查询网络适配器

【1+X Web前端等级考证 】 | Web前端开发中级理论 (附答案)_1+xweb前端开发中级-程序员宅基地

文章浏览阅读3.4w次,点赞77次,收藏438次。# 前言2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高?# 关于考不考因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,知名度并不是很高,有没有用现在无法一锤定音,看它以后办的怎么样把,软考以前也是慢慢地才知名起来。能考就考吧,据所知,大部分学校报考,基本不用交什么报考费(小部分学校,个别除._1+xweb前端开发中级

随便推点

项目组织战略管理及组织结构_项目组织的具体形态的是战略管理层-程序员宅基地

文章浏览阅读1.7k次。组织战略是组织实施各级项目管理,包括项目组合管理、项目集管理和项目管理的基础。只有从组织战略的高度来思考,思考各个层次项目管理在组织中的位置,才能够理解各级项目管理在组织战略实施中的作用。同时战略管理也为项目管理提供了具体的目标和依据,各级项目管理都需要与组织的战略保持一致。..._项目组织的具体形态的是战略管理层

图像质量评价及色彩处理_图像颜色质量评价-程序员宅基地

文章浏览阅读1k次。目录基本统计量色彩空间变换亮度变换函数白平衡图像过曝的评价指标多视影像因曝光条件不一而导致色彩差异,人眼可以快速区分影像质量,如何利用图像信息辅助算法判断影像优劣。基本统计量灰度均值方差梯度均值方差梯度幅值直方图图像熵p·log(p)色彩空间变换RGB转单通道灰度图像 mean = 225.7 stddev = 47.5mean = 158.5 stddev = 33.2转灰度梯度域gradMean = -0.0008297 / -0.000157461gr_图像颜色质量评价

MATLAB运用规则,利用辛普森规则进行数值积分-程序员宅基地

文章浏览阅读1.4k次。Simpson's rule for numerical integrationZ = SIMPS(Y) computes an approximation of the integral of Y via the Simpson's method (with unit spacing). To compute the integral for spacing different from one..._matlab利用幸普生计算积分

【AI之路】使用huggingface_hub优雅解决huggingface大模型下载问题-程序员宅基地

文章浏览阅读1.2w次,点赞28次,收藏61次。Hugging face 资源很不错,可是国内下载速度很慢,动则GB的大模型,下载很容易超时,经常下载不成功。很是影响玩AI的信心。经过多次测试,终于搞定了下载,即使超时也可以继续下载。真正实现下载无忧!究竟如何实现?且看本文分解。_huggingface_hub

mysql数据库查看编码,mysql数据库修改编码_查看数据库编码-程序员宅基地

文章浏览阅读3.5k次,点赞2次,收藏7次。其中 `DEFAULT CHARSET` 和 `COLLATE` 分别指定了表的默认编码和排序规则。其中 `DEFAULT CHARACTER SET` 指定了数据库的默认编码。其中 `Collation` 列指定了字段的排序规则,这也是字段的默认编码。此命令将更改表的默认编码和排序规则。此命令将更改字段的编码和排序规则。此命令将更改数据库的默认编码。_查看数据库编码

机器学习(十八):Bagging和随机森林_bagging数据集-程序员宅基地

文章浏览阅读1.3k次,点赞7次,收藏24次。本文深入探讨了集成学习及其在随机森林中的应用。对集成学习的基本概念、优势以及为何它有效做了阐述。随机森林,作为一个集成学习方法,与Bagging有紧密联系,其核心思想和实现过程均在文中进行了说明。还详细展示了如何在Sklearn中利用随机森林进行建模,并对其关键参数进行了解读,希望能帮助大家更有效地运用随机森林进行数据建模。_bagging数据集