H5防止安卓手機軟鍵盤彈出擠壓頁面導致變形的方法

直接解決辦法：

如果元素的高度是用100%表示，那么，安卓的鍵盤彈出時，高度會發生變化，導致布局混亂，所以最好給高度設置像素高度

$("html,body").height(window.innerHeight);

或者

document.body.querySelector("#main").style.height = window.innerHeight + "px";

 

原因分析：

原文地址

一、背景

在做移動端h5頁面時，因為遇到了安卓端軟鍵盤會導致頁面壓縮變形的問題，經過查閱與思考，終於解決問題，以下為解決過程。

二、圖示

修改前（安卓）

 

 

 

修改前（IOS端）

 

 

 

 

修改后（安卓端）

 

 

 

 

三、原因分析

安卓端：安卓中，如果將footer元素設置為position:fixed或absolute，因為軟鍵盤會改變頁面的高度（將頁面頂上來），因此footer元素也跟着移動上來，導致頁面變形；

IOS端：蘋果的軟鍵盤是覆蓋的（分層），因此H5頁面顯示沒有什么問題。

四、解決方法

安卓端解決input鍵盤彈出導致頁面壓縮變形的方法為：

方法1：將元素設置成static或者relative，不要脫離文檔流。

因為使用fixed或者absolute，會使得元素跟隨body的底部移動，而安卓端軟鍵盤將導致body高度變小而導致變形。

方法2：若想設置成absolute，則可以通過js固定其父級元素（如body或者父級div）的高度

例如1：設置元素高度時以px為單位設置，不要以%或vh為單位

• 若需動態適應不同手機屏幕高度（以px為單位），可以在頁面渲染時用js獲取屏幕高度，經過計算后得出元素的高度

let Height = window.innerHeight - 160;
$('div').height(Height);

例如2：寫個監聽resize事件（瀏覽器窗口大小調整時觸發）

let Height = $('body').height();
$(window).resize(function() {
    $('body').height(Height);
});

當鍵盤彈出的時候，固定body高度不變。　

注：不要設置成fixed