h5写移动端，底部按钮fixed被键盘顶上去的解决办法

在H5开发移动端应用时，当用户输入信息并且弹出虚拟键盘，固定在底部的元素可能会被顶上去。这个问题通常是由于浏览器对窗口高度的自动调整造成的。以下是几种常见的解决方案：

1. **监听键盘事件**:
可以使用JavaScript监听设备的`resize`事件，或者更常见的是使用`window.onorientationchange`和`window.scrollY`来检测页面滚动变化，当发现键盘弹起时，动态调整底部元素的位置。

window.addEventListener('resize', handleKeyboardChange);
function handleKeyboardChange() {
  if (window.innerHeight < document.documentElement.scrollHeight) {
    // 键盘弹起，调整底部元素位置
    adjustButtonPosition();
  } else {
    // 键盘收起，恢复默认位置
    resetButtonPosition();
  }
}

2. **利用CSS hack**:
使用媒体查询和负margin结合，可以针对不同屏幕尺寸设定不同的布局策略。

.bottom-button {
  position: fixed;
  bottom: 0;
  /* 添加这个hack，针对某些老版本的浏览器 */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-height: 600px) {
  .bottom-button {
    margin-bottom: -30px; /* 顶部留空30px应对键盘 */
  }
}

3. **采用Flexbox布局**:
使用 Flexbox 来布局容器，可以更自然地处理屏幕变化。

<div class="container">
  <!-- 内容 -->
  <button class="bottom-button">底部按钮</button>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow-y: auto;
}

.bottom-button {
  width: 100%;
  position: sticky;
  bottom: 0;
}
</style>

记得测试各种主流设备和浏览器，确保兼容性。同时，以上方案并不是所有情况下都适用，具体情况还需要考虑你的实际项目需求和技术栈支持。