软键盘引起的布局问题

最新推荐文章于 2021-02-25 15:20:36 发布

原创最新推荐文章于 2021-02-25 15:20:36 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

本文介绍了一种解决软键盘弹出导致网页布局变形的方法。通过监听窗口尺寸变化，动态调整指定元素的高度来确保页面始终保持良好的视觉效果。

软键盘的出现，导致背景图片变形，即使设置为100%，软键盘把屏幕挤得变形，自然100%也就变了

我的解决办法就是监听，变化了就重新给添加样式

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

$(window).on('resize', function () {
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    var nowHeight = clientHeight-100;
    if (nowHeight > nowClientHeight) {
        $("#addWrapper").css("height","500px")
    }
    else {
        $("#addWrapper").css("height","100%")
    }
});