前提
当在安卓手机上访问如图1所示的页面时,会出现如图2所示的现象。【苹果手机并不会出现该现象】
即当文本框(指input或textarea)获取焦点时,手机自带的键盘会被唤起并且弹出来。
此时,就会导致一个问题:处于absolute(绝对)定位或fixed(固定)定位的按钮,会被键盘顶上去,漂浮于键盘上方。
图1(正常情况,谷歌浏览器手机模拟器打开)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190808135522843.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDkzMjQ1MA==,size_16,color_FFFFFF,t_70)
图2(在安卓手机上调试)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190808135540157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDkzMjQ1MA==,size_16,color_FFFFFF,t_70)
方法一:
动态监控浏览器窗口的变化。当浏览器窗口的大小发生变化时,如果变化后的窗口高度小于初始的窗口高度,则让按钮隐藏起来;反之,则让按钮正常显示。
相关代码如下所示:
var win_h = $(window).height();//关键代码
window.addEventListener('resize', function () {
if($(window).height() < win_h){
$('.share-btn-box').hide();
}else{
$('.share-btn-box').show();
}
});
涉及到的知识点:
$(window).height()方法
jQuery中的resize()方法
知识点1
有些朋友可能会有疑问了:为什么要用$(window).height()而不用 $(document).height()呢?
原因:
首先,我们要知道:jQuery中的height()方法获取到的是浏览器可见区域的高度。
其次,
(
d
o
c
u
m
e
n
t
)
.
h
e
i
g
h
t
(
)
表
示
整
个
文
档
的
高
度
。
而
(document).height() 表示整个文档的高度。 而
(document).height()表示整个文档的高度。而(window).height() 表示浏览器可视窗口的高度。
注意:
当浏览器窗口的大小改变时,
(
w
i
n
d
o
w
)
.
h
e
i
g
h
t
(
)
会
随
之
改
变
,
但
是
(window).height()会随之改变,但是
(window).height()会随之改变,但是(document).height()是始终不变的。
知识点2
当调整浏览器窗口的大小时,发生 resize 事件。
resize()方法规定了当发生 resize 事件时运行的函数。
用法:
$(window).resize(function() {
});
方法二:
//navigator.userAgent.indexOf用来判断浏览器类型
var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
if (isAndroid){//如果是安卓手机的浏览器
var win_h = $(window).height();//关键代码
$("body").height(win_h);//关键代码
window.addEventListener('resize', function () {
// Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
if($('.share-btn-box').is(':visible')){
$('.share-btn-box').hide();
}else{
$('.share-btn-box').show();
}
}
});
}
在这里附上相关属性的说明:HTML DOM activeElement 属性 | 菜鸟教程
两种方法都可以解决问题, 但是 推荐第二种,考虑的比较全面,第一种如果横竖屏 、ios的情况下都会执行,性能不好,竖屏到横屏的时候会有bug,你的fixed元素会一直不显示