安卓移动端固定在底部的按钮被软件盘顶上去的解决方案
程序员文章站
2022-10-03 17:26:44
问题描述当安卓手机访问按钮吸底的页面时,处于absolute(绝对)定位或fixed(固定)定位的按钮,会被键盘顶上去,漂浮于键盘上方。而 IOS 则 不存在这个问题。思路监控屏幕大小的变化,当屏幕变小的时候让按钮隐藏起来,当屏幕大小与当前屏幕保持一致的时候,让按钮正常显示。解决方案原生 JS 实现var h = document.body.scrollHeight;window.onresize = function(){ if (document.body.scrollHeight...
问题描述
当安卓手机访问按钮吸底的页面时,处于absolute(绝对)定位或fixed(固定)定位的按钮,会被键盘顶上去,漂浮于键盘上方。而 IOS 则 不存在这个问题。
思路
监控屏幕大小的变化,当屏幕变小的时候让按钮隐藏起来,当屏幕大小与当前屏幕保持一致的时候,让按钮正常显示。
解决方案
- 原生 JS 实现
var h = document.body.scrollHeight;
window.onresize = function(){
if (document.body.scrollHeight < h) {
document.getElementById('btn').style.display = 'none';
}else{
document.getElementById('btn').style.display = 'block';
}
};
- JQuery 实现
var win_h = $(window).height();//关键代码
window.addEventListener('resize', function () {
if($(window).height() < win_h){
$('#btn').hide();
}else{
$('#btn').show();
}
});
本文地址:https://blog.csdn.net/sinat_33255495/article/details/107393046
上一篇: ServLet+Tomcat编写穷人版登录Web界面
下一篇: 策略模式生产实践