美文网首页
安卓手机调用键盘把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