input输入框在手机focus软键盘遮挡问题怎么解决？

在移动设备上，当输入框获得焦点时，软键盘可能会遮挡输入框。为了解决这个问题，可以使用以下几种方法：

当输入框获得焦点时，自动滚动到输入框的位置，使其可见。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll to Input</title>
  <style>
    body {
      height: 2000px; /* 增加页面高度以便测试 */
    }
    input {
      margin-top: 1500px; /* 使输入框在页面底部 */
    }
  </style>
</head>
<body>
  <input type="text" id="input-field" placeholder="Click to focus" />
  <script>
    const inputField = document.getElementById('input-field');

    inputField.addEventListener('focus', () => {
      setTimeout(() => {
        inputField.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }, 300); // 延迟确保键盘已完全显示
    });
  </script>
</body>
</html>

为了解决 iOS 设备上的键盘遮挡问题，可以在 CSS 中使用 viewport-fit 属性并设置 meta 标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>Viewport Fit</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-ite...

点击查看剩余70%