美文网首页
安卓手机调用键盘把fixed定位挤上去

安卓手机调用键盘把fixed定位挤上去

作者: Xbbing | 来源:发表于2022-12-20 10:07 被阅读0次

解决方案

大概思路就是安卓手机调用键盘时 会往上挤 导致clientHeight变化,定位会针对当前区域变化 导致fixed往上偏移
解决: 检测屏幕变化 将此fixed隐藏 当回归原来高的大小的时候 在显示

<!-- 此为fixed定位 -->
<div v-if="hidshow" class="fixed">这是fixed定位</div>
data() {
    return {
        hidshow: true
    }
}
mounted() {
        // 获取浏览器可视区域高度
        var u = navigator.userAgent;
        var isIos = !!u.match(/\(i[^;]+;(U;)?CPU.+Mac OS X/);
        if (!isIos) {
            // 键盘弹起事件
            var _this = this;
            var docmHeight = document.documentElement.clientHeight || document.body.clientHeight;
            window.onresize = function () {
                var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
                if (resizeHeight < docmHeight) {
                    _this.hidshow = false;
                } else {
                    _this.hidshow = true;
                }
            };
        }
    }

相关文章

网友评论

      本文标题:安卓手机调用键盘把fixed定位挤上去

      本文链接:https://www.haomeiwen.com/subject/duiuqdtx.html