解決鍵盤(pán)彈出時(shí)，webview被擠壓導(dǎo)致背景圖片被擠壓出空白

發(fā)布時(shí)間：2020-07-13 04:11:58 來(lái)源：網(wǎng)絡(luò) 閱讀：1820 作者：1503849 欄目：開(kāi)發(fā)技術(shù)

第一種方法：

1、給外層div容器設(shè)置背景圖片

2、監(jiān)聽(tīng)鍵盤(pán)彈出事件，彈出時(shí)調(diào)整容器的高度以適應(yīng)背景圖片

var oglHeight = document.querySelector("body").offsetHeight;

var windowSizeChange = function() { //彈出鍵盤(pán)時(shí)調(diào)整頁(yè)面的高度，防止背景圖片被擠壓出空白區(qū)域

var tempHeight = document.querySelector("body").offsetHeight;

if(tempHeight == oglHeight) {

console.info("屏幕鍵盤(pán)隱藏");

document.getElementById('content').style.height = "100%";

} else {

console.info("鍵盤(pán)顯示");

document.getElementById('content').style.height = "390px";

}

};

第二種方法：

背景固定，使用:before

body:before {

content: "";

position: fixed;

z-index: -1;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: url(../../p_w_picpaths/10.jpg) center 0 no-repeat;

background-size: cover;

}

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡