我们在做移动端项目时,经常会遇到满屏背景图布局。例如登录页、引导页、落地页等等。它们有一个相同点,就是有一个比较炫的底图满屏铺满。
问题
但是如果此页面有input输入框时,会发现软键盘会将页面顶起,导致背景图出现压缩、变形等情况。
// html
<div class="back">
<input class="val" type="text" id="name" maxlength="50">
</div>
// css
.back{
height:100vh;
background: url('../img/bg.png') center no-repeat;
background-size: 100% ;
}
效果我就不截图,自行脑补(哈哈哈)
方案
思考问题可能出在高度上,使用js动态获取屏幕高度,我是写jq时遇到的问题,因此以jq为例
//jq
$('#name').height($(window).height())