一聘芜、背景
在做移動(dòng)端h5頁(yè)面時(shí)缝龄，因?yàn)橛龅搅税沧慷塑涙I盤(pán)會(huì)導(dǎo)致頁(yè)面壓縮變形的問(wèn)題，經(jīng)過(guò)查閱與思考瞎饲，終于解決問(wèn)題炼绘，以下為解決過(guò)程。
演示地址：demo
二驮捍、圖示
修改前（安卓端）
修改前（IOS端）
修改后（安卓端）
三东且、原因分析
安卓端：安卓中，如果將footer元素設(shè)置為position:fixed或absolute鲁冯，因?yàn)檐涙I盤(pán)會(huì)改變頁(yè)面的高度（將頁(yè)面頂上來(lái)）色查，因此footer元素也跟著移動(dòng)上來(lái)，導(dǎo)致頁(yè)面變形综慎；
IOS端：蘋(píng)果的軟鍵盤(pán)是覆蓋的（分層），因此H5頁(yè)面顯示沒(méi)有什么問(wèn)題好港。
四米罚、解決方法
安卓端解決input鍵盤(pán)彈出導(dǎo)致頁(yè)面壓縮變形的方法為：
方法1：將元素設(shè)置成static或者relative，不要脫離文檔流拔莱。
因?yàn)槭褂?code>fixed或者absolute隘竭，會(huì)使得元素跟隨body的底部移動(dòng)，而安卓端軟鍵盤(pán)將導(dǎo)致body高度變小而導(dǎo)致變形尊剔。
方法2：若想設(shè)置成absolute菱皆，則可以通過(guò)js固定其父級(jí)元素（如body或者父級(jí)div）的高度
例如1：設(shè)置元素高度時(shí)以px為單位設(shè)置，不要以%或vh為單位
- 若需動(dòng)態(tài)適應(yīng)不同手機(jī)屏幕高度（以
px為單位）京痢，可以在頁(yè)面渲染時(shí)用js獲取屏幕高度篷店，經(jīng)過(guò)計(jì)算后得出元素的高度
let Height = window.innerHeight - 160;
$('div').height(Height);
例如2：寫(xiě)個(gè)監(jiān)聽(tīng)resize事件（瀏覽器窗口大小調(diào)整時(shí)觸發(fā)）
let Height = $('body').height();
$(window).resize(function() {
$('body').height(Height);
});
當(dāng)鍵盤(pán)彈出的時(shí)候，固定body高度不變。
注：不要設(shè)置成fixed
