移动端底部弹出的键盘，浏览器工具栏问题

时间：2020-03-23 13:32:35 阅读：170 评论：0 收藏：0 [点我收藏+]

最近在写自己的毕设时，遇到问题如下

问题一：

弹起键盘时，底部也弹起来了，在pc端没有问题

技术分享图片

原因：

底部是position：fixed

起初是因为pc端页面内容不够多无法撑满整屏（footer 无法在屏幕下方）所以才用的fixed

　　关键：使用 onresize 事件会在窗口或框架被调整大小时发生。

解决办法（jquery）

var winHeight = $(window).height(); //获取当前页面高度

$(window).resize(function () {

var thisHeight = $(this).height();

if ( winHeight - thisHeight > 140 ) {

//键盘弹出

$(‘.footer‘).css(‘position‘,‘static‘);

} else {

//键盘收起

$(‘.footer‘).css({‘position‘:‘fixed‘,‘bottom‘:‘0‘});

}

})

问题二：手机浏览器默认的工具栏挡住底部的展示（页面的高度不足底部fixed）

技术分享图片

头部加上<meta name="x5-fullscreen" content="true">

工具栏会变成三点小圆圈（至少我的手机是的）

这样就不会挡住内容了

原文：https://www.cnblogs.com/j190512/p/12551541.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

移动端 底部 弹出的键盘，浏览器工具栏问题