解决移动端input输入，导致满屏背景图片压缩变形的问题

我们在做移动端项目时，经常会遇到满屏背景图布局。例如登录页、引导页、落地页等等。它们有一个相同点，就是有一个比较炫的底图满屏铺满。

问题

但是如果此页面有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())