JAVA高级面试进阶训练营视频教程

admin

一、在开发移动端webapp时，我们经常会遇到这样的问题，当我们需要在页面底部固定一个logo或者说明时，往往会采用position：fixed进行固定定位或者absolute定位到最底部

这是一个很常规的操作，但是当页面上有input输入框时，当用户点击输入的时候，虚拟键盘被拉起，会造成我们在底部定位的内容，被谈起，而遮挡我们的输入框，造成无法输入或者界面布局不美观

像下面这样

其实造成这种问题的原因是手机的问题，虚拟键盘的唤起，改变了窗口本来的高度，而不是我们的样式设置的有问题，明白了这点，解决方案其实很简单，这里我使用css的媒介查询，来监听窗口的高度，当窗口的高度小于某个值时，我们认为虚拟键盘被拉起，然后我们就可以单纯的借助css来处理这个问题

@media (max-height: 400px) {
 　  .openpaylogo {
　　　　display: none;
　　}
}