iPhone数字键盘导致Bootstrap表单页面宽度变形问题求助

这个问题是iOS Safari在唤起不同类型键盘时的视口调整行为导致的，和Bootstrap列布局的交互引发了页面偏移与拉伸。以下是具体修复步骤和代码：

修复步骤 #

1. 添加正确的移动端视口标签：这是移动端适配的核心，确保页面始终匹配设备宽度
2. 更新Bootstrap布局结构：使用Bootstrap 5推荐的row替代已废弃的form-row，优化行内元素对齐
3. 添加iOS专属CSS修复：防止视口变化时的横向滚动与页面拉伸

修改后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 关键：设置正确的视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* iOS Safari键盘唤起时的修复 */
        html, body {
            overflow-x: hidden;
            min-width: 100vw;
        }
    </style>
</head>
<body>
    <div class="container">
        <form>
            <!-- 使用Bootstrap 5的row替代form-row -->
            <div class="row align-items-center">
                <div class="form-group col-7 autocomplete">
                    <input type="text"
                           class="form-control"
                           id="CommonName" 
                           name="species"
                           placeholder="蛾蝶俗名">
                </div>
                <div class="col-2">
                    <input type="number" 
                           class="form-control"
                           inputmode="numeric"
                           id="Count"  
                           name="count"  
                           min="0"
                           placeholder="数量">
                </div>
            </div>
        </form>
    </div>
</body>
</html>

关键说明 #

• 视口标签：viewport-fit=cover适配刘海屏设备，width=device-width确保页面宽度始终匹配设备，避免键盘唤起时的视口缩放
• Bootstrap布局更新：row是Bootstrap 5的标准行容器，align-items-center让输入框垂直对齐，避免高度变化引发的布局波动
• CSS修复：overflow-x: hidden禁止横向滚动，min-width:100vw强制页面宽度不小于设备视口，防止键盘唤起时的页面拉伸

调整列数无法解决问题的原因是：问题根源并非列宽设置，而是iOS Safari键盘唤起时的视口重计算行为，上述方案直接针对这个核心问题进行修复。

内容的提问来源于stack exchange，提问作者David Shearan