手机端键盘弹出挤压背景图片变形？简单解决方案！

这个问题可能是由于手机端的键盘弹出导致页面布局被压缩变形。可以通过以下几种方法来解决：

1. 使用CSS的vh（视口高度）单位来设置背景图片的高度，这样即使键盘弹出也不会影响背景图片的高度。

例如：

.bg-img{
  height: 100vh;
  background-image: url('your-image-url');
  background-size: cover;
}

2. 使用JavaScript来监听键盘事件，当键盘弹出时动态改变页面布局。

例如：

window.addEventListener('resize', function(){
  var vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

然后在CSS中使用变量来设置背景图片的高度：

:root {
  --vh: 1vh;
}

.bg-img {
  height: calc(var(--vh, 1vh) * 100);
  background-image: url('your-image-url');
  background-size: cover;
}

这样当键盘弹出时，页面布局会根据窗口的高度动态改变，从而避免了背景图片被压缩变形的问题。