编译了Graphics例子，放到自己手机上，运行以后不动，当自动锁键盘开始锁住手机后移动的小球速度变缓慢了，希望知道原因。

另外，Graphics例子中start（1,1,.....）中1代表1微秒，手机的cpu能响应那么快吗？怎么会这么写呢？ 

为什么？　　

　　为什么要随时监测屏幕大小，这是因为我们在手机端的时候，常常会遇到这样的问题：当点击输入框的时候，手机的键盘就会自动浮现，它会使得页面的可视示高度（document.body.clientHeight）发生变化。而我们的输入框就被可怜的遮挡在小键盘后面

怎么办？

方法1

　　我们不知道小键盘何时会出现，但有一点是可以确定的，当小键盘出现的时候，body的可视区域一定为发生变化！！当我们检测到页面的可视高度发生了变化，我们就可以确定手机的键盘出来了。于是我们就可以使用document.getElementById('×××××').scrollIntoView();把被小键盘遮挡住的输入框给上移到可视区域。

Ps:结合scrollIntoView()使用的还有activeElement，当我们页面有多个input输入框时，我们可以使用HTML5的辅助管理DOM功能，document.activeElement属性始终会引用DOM当前获得的焦点元素。可以获得当前用户焦点的元素。


			
1
			
			

			
document.activeElement.scrollIntoView();
			
		
监测手机小键盘弹出代码：


			
1

			
2

			
3

			
4

			
5

			
6

			
7
			
			

			
window.onresize = () => {

			
    // 注意，return返回的函数为立即执行函数！！

			
    return (() => {

			
        window.screenHeight = document.body.clientHeight;

			
        this.showHeight = window.screenHeight;

			
    })()

			
}
			
		
当我拿到showHeight，在vue里，我就可以通过watch他的变化，然后再执行相应的逻辑代码，使用Vue.js完整代码如下：


			
1

			
2

			
3

			
4

			
5

			
6

			
7

			
8

			
9

			
10

			
11

			
12

			
13

			
14

			
15

			
16

			
17

			
18

			
19

			
20

			
21

			
22

			
23

			
24

			
25

			
26

			
27

			
28

			
29

			
30

			
31

			
32

			
33

			
34

			
35

			
36

			
37

			
38
			
			

			
data() {

			
    return {

			
        // 默认屏幕高度

			
        docmHeight: document.documentElement.clientHeight,

			
        showHeight: document.documentElement.clientHeight,

			
    }

			
// 渲染后执行

			
mounted() {

			
    window.onresize = () => {

			
        return (() => {

			
            window.screenHeight = document.body.clientHeight;

			
            this.showHeight = window.screenHeight;

			
        })()

			
    }

			
},

			
watch: {

			
    showHeight: 'inputType',

			
},

			
methods: {

			
    // 检测屏幕高度变化

			
    inputType() {

			
         if (!this.timer) {

			
             this.timer = true

			
             let that = this

			
             setTimeout(() => {

			
                 if (that.docmHeight > that.showHeight) {

			
                     that.inputfile = false;

			
                     if (document.activeElement.className === 'weui-textarea') {

			
                         document.getElementById('applyNote').scrollIntoView(); // 输入框的id为applyNote，class为weui-textarea

			
                     }

			
                 } else if (that.docmHeight <= that.showHeight) {

			
                     that.inputfile = true;

			
                 }

			
                 that.timer = false;

			
             }, 20)

			
        }

			
    }

			
}
			
		
方法2

设置相对定位，通过top来使输入框到达合适的位置

1.js拿不到键盘的弹出和收起事件;

2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。

 getElementOffsetTop(el) {
    let top = el.offsetTop
    let cur = el.offsetParent
    while(cur != null){
          top += cur.offsetTop
          cur = cur.offsetParent
   }
   return top
  }

  componentDidMount() {
    const u = navigator.userAgent
    const isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//android终端
    // alert('android'+isAndroid)
    if(isAndroid){ // android统一处理，不影响ios的自身处理
      const body = document.getElementsByTagName('body')[0] // 兼容获取body

      const regDom = document.querySelector('.wrapper_register') // 获取页面根元素
      const content = document.querySelector('.content') // 表单内容部分

      // const scrollHeight = body.scrollHeight // 网页文档高
      // const scrollTop = body.scrollTop// 卷上去的高

      const clientHeight = body.clientHeight //可见高
      const fixHeight = clientHeight/3 // 定位高，弹出键盘时input距浏览器上部的距离，自己定义合适的

      // 符合需弹出键盘的元素query
      const queryStr = 'input[type="text"], input[type="tel"], input[type="password"], textarea'
      const inputs = content.querySelectorAll(queryStr)

      // console.log(inputs)

      const offsetTopArr = Array.prototype.map.call(inputs,item=>{
        return this.getElementOffsetTop(item) // offsetTop只能获取到顶部距它的offsetParent的距离，需此方法获取到元素距顶部的距离
      })

      inputs.forEach((item, i)=>{
        item.addEventListener('focus',()=>{
          // 改变top上移页面
          regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px'
        })

        item.addEventListener('blur',()=>{
          // 恢复top
          regDom.style.top = 0
        })
      })
    }
  }

效果基本实现，这里还有两个问题：

第一，如果下面的提交按钮是fixed，有些手机键盘弹出时会把按钮顶上来，如果上述代码中fixHeight设置不合适，会导致这个按钮遮挡输入框。所以为了统一效果，将底部按钮取消fixed，随页面滚动。

第二，如果点击键盘上的收起键盘按钮，会导致页面top无法恢复，因为没有触发输入框失焦方法，需点击空白处恢复。（目前没找到解决办法）