前言

随着移动互联网的兴起，渐渐的手机浏览器也争先恐后的出世，PC浏览器独占鳌头的时代已经过去，现在是多元化时代，由于移动端机型太多，导致前端在每个手机的表现形式不一致，下面针对一些常见的情况出一份文档

移动端常见问题

ios端时间显示为NaN

我们有时候能看到ios在显示时间的时候会显示NaN, 而安卓机却没事

原因是

1.ios上的时间dataString必须满足iso8601或者Rfc2822格式不然无法解析

iso8601:YYYY-MM-DDThh:mm:ss+00:00

而后端返回的可能数据不符合以上格式

2. ios不支持YYYY-MM-DD格式

解决方案:

1.后端传回符合格式时间格式

2.前端手动更改-变为/

ios触发input file

通过js唤起input file时, ios:需要点击两下, android:只需要一下

**解决方案: **

ios需要连续触发两下click事件
input.click()
input.click()

ios上拍照图片会旋转

IOS在拍照上传图片的时候，图片会被翻转90度

解决方案:

引入Exif.js根据当前图片旋转角度来更改图片角度

移动端双击浏览器会缩放

<meta name="viewport" content="user-scalable=none, initial-scale=1.0">

虚拟键盘的高度

我们在有时做移动端的时候会有访问虚拟键盘高度的需求，恰巧安卓与IOS表现行为不一致

键盘弹出的不同表现

IOS:IOS的键盘处在窗口的最上层，当键盘弹起时，webview的高度height并没有改变，只是 scrollTop发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度，而只有键盘弹出时页面恰好也滚动到最底部时，scrollTop的变化值为键盘的高度，其他情况下则无法获取。这就导致在IOS情况下难以获取键盘的真实高度。

Android:webview中留出空间，该空间小于等于的键盘空间，变化的高度差会随着布局而不同，有的认为键盘高度+页面高度=原页面高度:是错误的误导，只有在某种很巧合的布局情况下才可套用此公式。

键盘收起的不同表现

IOS:触发键盘上的按钮收起键盘或者输入框以外的页面区域时，输入框会失去焦点，因此会触发输入框的blur事件。 Android:触发键盘上的按钮收起键盘时，输入框并不会失去焦点，因此不会触发页面的blur事件；触发输入框以外的区域时，输入框会失去焦点，触发输入框的 blur事件。

监听键盘的弹出与收起

在h5中目前没有接口可以直接监听键盘事件，但我们可以通过分析键盘弹出、收起的触发过程及表现形式，来判断键盘是弹出还是收起的状态。

键盘弹出：输入框获取焦点时会自动触发键盘的弹起动作，因此，我们可以监听输入框的focus事件，在里面实现键盘弹出后所需的页面逻辑。这在ios及android中表现一致。

键盘收起：从第2部分可知，触发键盘收起的不同形式会存在差异化表现，当触发其他页面区域收起键盘时，我们可以监听输入框的blur事件，在里面实现键盘收起后所需的页面逻辑。而在通过键盘按钮收起键盘时在ios与android端存在差异化表现，下面具体分析：

IOS:触发了输入框blur事件，仍然通过该办法监听。 Android:没有触发输入框的blur事件。但通过第1、2部分我们可以知道，在android中，键盘的状态切换（弹出、收起）不仅和输入框关联,同时还会影响到webview高度的变化，那我们不妨通过监听webview height(window.onresize事件)的变化来判断键盘是否收起

小结

1.在ios中,无论何种布局，为了使输入框展示在可视区域中，键盘弹出时，页面会向上滚动，该过程与Element.scrollIntoViewIfNeeded()方法（将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域）产生的效果一致；且高度始终不变，页面可滚动。

2.在android中，键盘唤起后，页面可滚动与否由其处在正常文档流中的元素决定：如果正常文档流中的元素可全量展示，页面不可滚动，否则页面支持滚动；（如果正常文档流的元素所占的可见区域超过一屏幕可以滚动）

3.在android中，键盘唤起后，fixed元素的基准会发生变化:根据bottom定位的元素，其基线变为键盘上部；根据top定位的元素，仍然根据页面顶部，因此为照顾正常文档流及fixed元素的用户体验，有的元素可根据顶部定位，有的可以根据底部定位。

解决方案

android:
 1.获取键盘弹起前的documentElement的clientHeight
 2.监听window.resize时间或者input的focus事件
 3.在执行第一步
 4.两者相减就是虚拟键盘高度


ios:
 ios比较复杂，因为它变得是scrollTop，而window下没有scrollHeight的属性，导致无法计算虚拟键盘高度
 但是在ios13版本以上有个visualViewport
 window.visualViewport.addEventListener('resize', function() {
  window.visualViewport.height
  // 键盘高度
})

结束语

各位看官看的可以的点个赞吧，嘻嘻

可以关注微信公众号哦: 前端马丁

往期

?javascript面试指南(一)

?javascript面试指南(二)

?javascript技巧(一)

?javascript技巧(二)

?html凡尔赛技巧