一、問(wèn)題：
在做移動(dòng)端h5頁(yè)面時(shí)，安卓端軟鍵盤會(huì)導(dǎo)致頁(yè)面壓縮變形的問(wèn)題：（安卓端有問(wèn)題，IOS端沒(méi)問(wèn)題）
二、原因分析
安卓端：安卓中，如果將footer元素設(shè)置為position:fixed或absolute，因?yàn)檐涙I盤會(huì)改變頁(yè)面的高度（將頁(yè)面頂上來(lái)），因此footer元素也跟著移動(dòng)上來(lái)，導(dǎo)致頁(yè)面變形；
IOS端：蘋果的軟鍵盤是覆蓋的（分層），因此H5頁(yè)面顯示沒(méi)有什么問(wèn)題。
三、解決方法
如果在安卓手機(jī)上鍵盤彈起時(shí)整屏的背景圖會(huì)變形，可能是由于安卓系統(tǒng)的軟鍵盤導(dǎo)致的布局問(wèn)題?？梢試L試以下幾種方法來(lái)解決這個(gè)問(wèn)題：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-640017.html
- 使用CSS屬性
background-attachment: fixed;：在CSS中給背景圖所在的元素添加background-attachment: fixed;屬性，這樣背景圖會(huì)固定在屏幕上，不會(huì)隨著滾動(dòng)而變形。例如：
body {
background-image: url('your-background-image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
- 使用
position: fixed;：將背景圖所在的元素的position屬性設(shè)置為fixed，這樣背景圖也會(huì)固定在屏幕上。例如：
body {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('your-background-image.jpg');
background-size: cover;
background-repeat: no-repeat;
}
- 使用
background-size: 100% auto;：將背景圖的background-size屬性設(shè)置為100% auto，這樣背景圖的寬度會(huì)自動(dòng)適應(yīng)屏幕寬度，高度則根據(jù)圖像比例自動(dòng)調(diào)整。例如：
body {
background-image: url('your-background-image.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
}
完成
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-640017.html
到了這里，關(guān)于H5 防止安卓手機(jī)軟鍵盤彈出擠壓頁(yè)面導(dǎo)致變形的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
