H5頁面關於android軟鍵盤彈出頂起底部元素的解決方案

  應用場景：用div在移動端頁面設置一個底部工具欄，css的代碼大概如下：

.tool{
    width: 100%;
    height: 60px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    background-color: #000080
  }

  如果頁面有一輸入框<input type="text">，在點擊輸入框輸入內容時，移動端軟鍵盤彈起，這時這個div也一起彈起，頂在軟鍵盤上面，會遮擋輸入框，要用下面的方法去消除彈起來的div，主要思路是div彈起來后隱藏掉。

  通過resize方法監聽$(this).height()，獲取頁面高度，成功獲得改變后的頁面高度，軟鍵盤彈出時隱藏被頂起的頁面。

var winHeight = $(window).height();   //獲取當前頁面高度
        $(window).resize(function(){
           var thisHeight=$(this).height();
            if(winHeight - thisHeight >50){
                 //當軟鍵盤彈出，在這里操作
            $(".頂起的頁面").hide();
            }else{
                //當軟鍵盤收起，在此處操作
            $(".頂起的頁面").show();
            }
        });

  this是html對象 $(this)是jq對象，調用jq對象的height()方法。