移动端布局,手机输入法会把footer顶上去

如题
图片如下:

clipboard.png

这个应该怎么解决?基于vue-cli的项目

回答:

正常就该顶上去啊。你加个背景就行了。
然后我看了其他几个网站的解决方案:

  1. 搜索的时候直接跳转到别的页面了(饿了么)。
  2. 隐藏(思否)但是有时候也会顶上来。
  3. 没有底部(美团)。

回答:

这是因为软键盘把视口的高度压缩了,可以在初始加载的时候,获取视口高度,并设置 body的高为视口高度,就可以了。

回答:

你可以获取视口的高度,底部的定位基于top定位而不是基于bottom,这样可以解决这个问题
https://www.jianshu.com/p/eee…

回答:

底部footer的样式怎么写的? 定位到下面会这样吗

回答:

时隔10天了…
思路是高度发生变化时候,隐藏掉该导航栏
footerbox ==> 底部导航

$(function(){
    var mHeight = $(document).height();
    $(window).resize(function () {
        if($(document).height() < mHeight){
            $("#footerbox").css({"position":"static","display":"none"});
        }else{
            $("#footerbox").css({"position":"absolute","display":"block"});
        }
    });
});

希望有用…

回答:

兼容性问题?用自己项目测试,footer是fixed定位,测试机i7 safari和微信,一切正常~

回答:

各路大神显神通,正好我最近遇到了这个问题footer使用fixed布局,在部分安卓机型会出现这种情况,我监听了用户输input的状态,输入的时候让footer的position为static,在光标离开input的时候再设置回fixed。

<template>
    <!-其他代码省略-->
    <input class="search" @focus="focus" @blur="blur"/>
    <footer id='footers'></footer>
</template>
<script>
    <!-其他代码省略-->
    methods:{
        focus(e){
          //考虑到footer不一定和input在一个组件内,所以没有使用vue的$refs
          var footer=document.getElementById('footers')  
          footer.style.position='static'
        },
        blur (e) {
          var footer=document.getElementById('footers')
          footer.style.position='fixed'
        }
    }
</script>

回答:

使用 scrollIntoView API 保证当前的元素显示在窗口
<body>

<div class="chunk"></div>
<div class="btn-top">up</div>
<div class="btn-bottom">down</div>
<script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click', function() {
      test.scrollIntoView(true);
    });
    down.addEventListener('click', function() {
      test.scrollIntoView(false);
    });
</script>

</body>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注