美文网首页
H5防止安卓手机软键盘弹出挤压页面导致变形的方法

H5防止安卓手机软键盘弹出挤压页面导致变形的方法

作者: One_Hund | 来源:发表于2018-04-29 16:28 被阅读0次

一、背景

在做移动端h5页面时,因为遇到了安卓端软键盘会导致页面压缩变形的问题,经过查阅与思考,终于解决问题,以下为解决过程。

演示地址:demo

二、图示

修改前(安卓端)

修改前(安卓端)

修改前(IOS端)

修改前(IOS端)

修改后(安卓端)

修改后(安卓端)

三、原因分析

安卓端:安卓中,如果将footer元素设置为position:fixedabsolute,因为软键盘会改变页面的高度(将页面顶上来),因此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

相关文章

网友评论

      本文标题:H5防止安卓手机软键盘弹出挤压页面导致变形的方法

      本文链接:https://www.haomeiwen.com/subject/fdzolftx.html