做移動端網頁的時候，總會遇到一些奇葩的問題，在PC端瀏覽器做模擬除錯時，都是完美顯示的，但是一到真機除錯就是各種坑；

我在做移動端網頁時的需求是這樣的：

頁面背景圖片是自適應螢幕大小的，頁面上有輸入框和按鈕，當點選輸入框時，移動端的軟鍵盤彈出，但是背景圖片不能受影響而被壓縮，且頁面不能應為軟鍵盤的彈出高度超出螢幕顯示高度而上下滾動；

我的解決方案如下：

在頁面初始化時，獲取裝置畫素可見寬高，並設定body的高度為此高度；

程式碼如下：

      var clientHeight = document.documentElement.clientHeight;;
      var body = document.getElementById("body");
      body.style.height = clientHeight + "px";
 

為了防止軟鍵盤彈出式高度增加使得頁面滾動，於是我又給body設定overflow:hideden;

程式碼如下：

body{
    width:100%;
    overflow:hidden;
}

設定完成後，我在PC端的瀏覽器上做測試，發現已經達到預期的效果了，後來上真機測試，問題來了，軟鍵盤彈出時，頁面會發生滾動，body的overflow:hidden無效；IOS和安卓效果都是這樣；

後來找了一下相關的案例，終於找到了解決辦法；

方法如下：

通過父節點固定，像body的父節點是html，可以通過固定父節點html， 來把其下的子節點固定，當然子節點前提是不做脫離文件流的行為。   

html{

       position:fixed;

       height:100%;

       width:100%;

    }

問題完美解決！！