移动端兼容问题

1，ios软键盘弹出时候遮挡输入框

这类问题主要出现在input，textarea等输入框在页面底部的时候，ios会概率性等出现此问题,
具体情况可参考：https://www.cnblogs.com/wx1993/p/6059668.html
解决方式如下：

 $('input').on('click', function () {
  var target = this;
   // 使用定时器是为了让输入框上滑时更加自然
  setTimeout(function(){
    target.scrollIntoView(true);
  },100);
});

2，ios + fastClick 导致 input点击获取焦点慢的问题

移动端默认有点击事件300ms延迟问题，为了解决这个问题，我们通常使用fastClick插件去解决。但是使用了fastClick在ios中会导致输入框聚焦很慢，反应不灵敏，必须要用力按下去才能获取到焦点。
解决方式如下：
在 /node_modules/fastclick/lib/fastclick.js文件中找到focus方法添加一句代码 targetElement.focus();

FastClick.prototype.focus = function (targetElement) {
  let length;
  if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 
    && targetElement.type !== 'time' && targetElement.type !== 'month') {
    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
  }
}

3，ios + fixed定位 + input输入框聚焦时，fixed定位元素会弹到软键盘上，导致页面错乱

目前暂未解决方法，注意有input的输入框时候尽量不要使用fixed定位元素。等有合适的解决方案再做记录。

4. ios下 mint-ui 的datePicker 插件滑动穿透

解决方法1：
思路比较简单，使用Vue的@touchmove.prevent,在datePicker元素外加一层div元素包裹，在外层div里加上@touchmove.prevent,效果还在测试中。

<div style="width: 100%;" @touchmove.prevent>
  <mt-datetime-picker
    :startDate="startDate"
    :endDate="endDate"
    @confirm="handleConfirmSupose"
    ref="picker"
    type="date"
    year-format="{value} 年"
    month-format="{value} 月"
    date-format="{value} 日">
  </mt-datetime-picker>
</div>

解决方法2：
思路是监听visible-change事件，当datePicker框打开时给body元素加上阻止默认事件，当datePicker框消失时移除body元素上的阻止默认事件。
具体操作参考： https://www.jianshu.com/p/58c7c21d5df4

5.ios 刘海屏在浏览器中无法充满屏幕，会在底部留出一块白色区域

iphoneX的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。我们页面的内容默认被限制在了这样的“安全区域”内，所以会导致两边会出现一道白条。
很多时候我们想让页面充满整个屏幕，（比如存在背景色，背景图片）为了解决这个问题，ios提出了一个viewport-fit的属性，cover代表充满整个屏幕。
可参考：（http://t.zoukankan.com/djjlovedjj-p-13983852.html）

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
body{
  height: calc(96rpx+ constant(safe-area-inset-bottom));
  height: calc(96rpx + env(safe-area-inset-bottom));
  padding-bottom: constant(safe-area-inset-bottom); 
  padding-bottom: env(safe-area-inset-bottom);
}
如果body高度无法达到100%，记得将body的最外层的子元素高度设置为100vh,已经解决了我的问题。