在移动设备上，当键盘弹出时，表单输入框可能被键盘遮挡而导致用户无法看清输入的内容。为了解决这个问题，可以尝试以下几种方法：

使用JavaScript监听页面当前活动元素，在输入框被选中时滚动把它移到键盘的上面：

//获取当前窗口高度
let winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
//监听页面元素selected 事件
document.addEventListener('selectionchange', () => {
  const activeElement = document.activeElement;
  if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
    //获取输入框距离窗口顶部的位置
    let top = activeElement.getBoundingClientRect().top;
    //计算出需要滚动的距离
    let distance = winHeight - top - activeElement.offsetHeight;
    if(distance < 0) {
      window.scrollTo(0, document.body.scrollTop - distance);
    }
  }
});

使用 CSS 控制输入框的样式，提高它们的 z-index 值来将其浮在键盘上方：

input, textarea {
  position: relative;
  z-index: 10;
}

调整视口的高度，以便输入框能够完全显示：

//监听页面尺寸变化
window.addEventListener('resize', () => {
  const activeElement = document.activeElement;
  if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
    //调整视口的高度使输入框能够完全显示
    document.body.style.height = window.innerHeight + 'px';
    setTimeout(() => {
      activeElement.scrollIntoViewIfNeeded();
    }, 100);
  } else {
    document.body.style.height = '100%';
  }
});

通过上述方法进行适配，可以让页面保持一致的显示效果，并且能够更好的符合移动端用户体验需求。