移动端输入框与底部定位键出现的键盘弹出问题

最新推荐文章于 2020-07-28 18:16:08 发布

原创最新推荐文章于 2020-07-28 18:16:08 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种解决移动端输入框在键盘弹出时导致页面布局错乱的问题的方法。通过设置文档高度为屏幕高度，并监听窗口尺寸变化来实现底部元素的显示与隐藏。

移动端输入框与底部定位键出现的键盘弹出问题

解决方案

//设置doc高度为屏幕的高度
 $('body').height($('body')[0].clientHeight);    
    var h = $(window).height();
//当调整浏览器窗口的大小时，发生 resize 事件
    $(window).resize(function() { 
        if ($(window).height() < h) {
            $('.rg-footer').hide();
        }
        if ($(window).height() >= h) {
            $('.rg-footer').show();
        }
    });