近来在做一个挪动端的项目，底部的输入框取得核心时，软键盘弹起，在IOS手机上火炬页面全部卷走，只看到页面的下半部份。

起首经由重复调试，找到两条主要线索：

1、先找到键盘弹起时页面中会转变的值：
测试软键盘弹起时的正文全文高度、可见地区高度、文档显现高度 、被卷去的高度这几个值是不是的转变（iphone 5真机测试 320*568）。

    scrollHeight：504  稳定
    offsetHeight：504  稳定
    clientHeight: 504  稳定
    innerHeight: 206   转变
    scrollTop：298     转变
    
    
   转变的值有文档显现高度innerHeight、被卷去的高度scrollTop这两个值

2、找到一条线索，当输入框在页面中的位置，比键盘高度高时，软键盘弹起，不会引发页面往上滚。

因而我就这样想，当键盘弹起时，就先手动让输入框弹上来，那末页面就不会滚了，然后收缩页面高度，让输入框落到页面底部。

具体做法：

 // 1、输入框猎取核心，推断是不是为IOS，如果是，把input的bottom值设为文档高度，让input先飞上天，
 // 2、由于之前测试到，页面被滚走的时刻，window.innerHeight会转变，所以等键盘弹起时（设置的100ms），
 // 动态转变body.height为window.innerHeight，把body的高度收缩到文档但是地区高度，
 // 然后设置input的bottom为0，如许在视觉上就完成了结果啦
handleFocus() {
  if (isIOS()) {
    this.$refs.botFooter.style.bottom = window.innerHeight + 'px'
    setTimeout(() => this.reset(), 100)
  }
},

reset() {
  document.body.style.height = window.innerHeight + 'px'
  this.$refs.botFooter.style.bottom = 0
}

我做的这个项目是嵌套在app中的，亲测有用，而且项目已上线。app中的浏览器不会涌现ios自带浏览器中下方摆布翻页的谁人菜单条，所以在IOS自带浏览器中能够另有题目。