CSS absolute 绝对定位布局在 Android 系统软键盘弹出时被顶起
CSS JavaScript Android About 2,702 words问题
Android
系统中,HTML
元素在使用绝对定位时,当软键盘弹出时,绝对定位的元素被顶起。iOS
、Surface
无此问题。
说明
网络上已经有很多关于JavaScript
监听Android
软键盘弹出与隐藏的文章,很多只判断了innerHeight
或clientHeight
,但当设备旋转时会出现问题。
解决
记录innerHeight
和innerWidth
的大小总和进行判断,保证设备旋转时等到的值是正确的,只记录高度在设备旋转时会出错。
注意:需要添加viewport
,禁止在移动端缩放,防止宽高被拉伸导致出错。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
let originalSize;
window.onload = function () {
originalSize = window.innerWidth + window.innerHeight;
document.getElementById("init").innerText = "originalSize#" + originalSize + ", innerWidth#" + window.innerWidth + ", innerHeight#" + window.innerHeight;
}
window.addEventListener("resize", this.adjustDisplay);
function adjustDisplay() {
const nowSize = window.innerWidth + window.innerHeight;
document.getElementById("resize").innerText = "originalSize#" + originalSize + ", nowSize#" + nowSize + ", innerWidth#" + window.innerWidth + ", innerHeight#" + window.innerHeight;
if (originalSize > nowSize) {
// 软键盘弹出
// document.getElementById("myDiv").style.display = "none";
document.getElementById("status").innerText = "软键盘弹出"
} else {
// 软键盘隐藏
// document.getElementById("myDiv").style.display = "block";
document.getElementById("status").innerText = "软键盘隐藏"
}
}
// // 只记录高度在设备旋转时会出错
// let innerHeight;
// window.onload = function () {
// innerHeight = window.innerHeight;
// document.getElementById("init").innerText = "innerHeight#" + window.innerHeight;
// }
// window.addEventListener('resize', () => {
// const newInnerHeight = window.innerHeight;
// document.getElementById("resize").innerText = "originalInnerHeight#" + innerHeight + ", newInnerHeight#" + newInnerHeight;
// if (innerHeight > newInnerHeight) {
// // 键盘弹出事件处理
// document.getElementById("status").innerText = "软键盘弹出"
// } else {
// // 键盘收起事件处理
// document.getElementById("status").innerText = "软键盘隐藏"
// }
// });
</script>
</head>
<body>
<div id="init"></div>
<div id="resize"></div>
<div id="status">test</div>
<input type="text">
</body>
</html>
Views: 2,322 · Posted: 2021-06-28
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...