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

2022-12-20  本文已影响0人  Xbbing

解决方案

大概思路就是安卓手机调用键盘时 会往上挤 导致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;
                }
            };
        }
    }
上一篇下一篇

猜你喜欢

热点阅读