移动端-H5输入框在弹起键盘后被遮挡问题

原因分析:

点击输入框,页面弹起输入框整个body的高度就被压缩了,并且没有设置滑动,页面的元素被挤到了一块,导致下面的购买按钮被挤上来了

移动端-H5输入框在弹起键盘后被遮挡问题

 

解决方案:

给整个页面设置min-height,并且设置滑动

 body,html {
    position: relative;
    width: 100%;
    overflow-y: auto;
    height: 100vh;
    min-height: 640px;
}

/* 购买按钮 */
.footer {
    width: 90%;
    position: absolute;
    bottom: 50px;
    left: 5%;
}