1、input获取焦点弹出键盘时遮住input

  web页面有多个input输入框时，底部的input获取焦点弹出键盘，会出现遮住input情况，用户输入的内容不能正常展示，需要手动上滑。如下图一键盘遮住了备注输入框，图二是处理后的效果，备注输入框自动上滑。

vue 区分安卓和 ios vue android ios_输入法键盘遮住input

vue 区分安卓和 ios vue android ios_输入法键盘遮住input_02


解决办法：使用相对定位relative和绝对定位absolute

<style>
 .main {
    position: relative;
    height: 100%;
    width: 100%;
 }
 .section {
    position: absolute;
  } 
<style>
<body>
	<div class="main">
	  <div class="section">
	    <input>
	  </div>
	</div>
<body>

2、Android手机fixed固定在底部的按钮被键盘往上移

  在web页面中用position: fixed对按钮进行固定定位，Android输入框获取焦点弹出键盘会把按钮往上移，我们希望的结果是底部固定按钮不随着输入法而变动。 如下图一“提交”按钮随着键盘往上移，图二是处理后的效果，“提交”按钮自动隐藏。

vue 区分安卓和 ios vue android ios_vue移动端开发_03

vue 区分安卓和 ios vue android ios_输入法键盘遮住input_04


解决办法： 监控屏幕大小的变化，当屏幕变小的时候让按钮隐藏起来，当屏幕大小与当前屏幕保持一致的时候，让按钮正常显示。

let H = window.innerHeight
window.addEventListener('resize', () => {
  if (window.innerHeight < H) {
    this.showBtn = false
  } else {
    this.showBtn = true
  }
})

3、Android和IOS点击反应延迟

  由于应用是web开发，不是原生的Android和iOS开发，需要对click事件有基本的了解，浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。所以Android和IOS点击后会有300ms延迟，反应迟钝降低了用户体验。为了能够立即响应用户的点击事件，可以使用fastClick。

npm install fastclick

在main.js中使用fastclick

import FastClick from 'fastclick'
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function () {
    FastClick.attach(document.body)
  }, false)
}

4、IOS输入框点击获取焦点不灵敏

  引入fastClick之后，IOS会产生输入框点击无法获取焦点问题，只有双击或者长按的时候才能使input输入框获取到焦点，解决方法是强制元素focus，即在改写的focus响应函数中直接触发元素的focus事件，在main.js中加入以下代码：

FastClick.prototype.focus = function(targetElement) {
    targetElement.focus();
};