H5页面输入框遮挡问题解决方案在移动端H5开发中，设置100vh高度时输入框经常会被软键盘遮挡，这确实是个常见痛点。让我

在移动端H5开发中，设置100vh高度时输入框经常会被软键盘遮挡，这确实是个常见痛点。让我为您提供一个完整的解决方案。

问题分析与解决方案思路

当输入框获得焦点时，软键盘弹出会导致视口高度变化，但100vh不会自动调整，因此页面底部内容可能被遮挡。

解决思路：

使用CSS变量动态计算视口高度
通过JavaScript监听视口变化
确保输入框在焦点时滚动到可视区域

完整实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>H5输入框遮挡问题解决方案</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            /* 使用自定义变量代替vh */
            --app-height: 100vh;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: #333;
            overflow: hidden;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            min-height: var(--app-height);
            padding: 20px;
            max-width: 500px;
            margin: 0 auto;
            position: relative;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            margin-bottom: 20px;
            flex-grow: 1;
            overflow: auto;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #5d5d5d;
        }
        
        input, textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        input:focus, textarea:focus {
            border-color: #6e8efb;
            box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.2);
            outline: none;
        }
        
        .btn-submit {
            background: linear-gradient(to right, #6e8efb, #a777e3);
            color: white;
            border: none;
            padding: 16px;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            box-shadow: 0 4px 15px rgba(110, 142, 251, 0.3);
            transition: all 0.3s;
        }
        
        .btn-submit:active {
            transform: translateY(2px);
            box-shadow: 0 2px 8px rgba(110, 142, 251, 0.3);
        }
        
        .problem-section {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 20px;
            margin-top: 25px;
        }
        
        .solution-title {
            color: #6e8efb;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }
        
        .solution-list {
            padding-left: 20px;
        }
        
        .solution-list li {
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        footer {
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            font-size: 0.9rem;
        }
        
        .note {
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 8px 8px 0;
        }
        
        @media (max-height: 600px) {
            header {
                padding: 15px 0;
            }
            
            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container" id="appContainer">
        <header>
            <h1>H5输入框遮挡解决方案</h1>
            <div class="subtitle">移动端100vh问题完美处理</div>
        </header>
        
        <div class="card">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" placeholder="请输入您的姓名">
            </div>
            
            <div class="form-group">
                <label for="email">电子邮箱</label>
                <input type="email" id="email" placeholder="example@domain.com">
            </div>
            
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" placeholder="13800138000">
            </div>
            
            <div class="form-group">
                <label for="message">留言信息</label>
                <textarea id="message" rows="4" placeholder="请输入您的留言..."></textarea>
            </div>
            
            <button class="btn-submit">提交表单</button>
            
            <div class="problem-section">
                <h3 class="solution-title">问题原因与解决方案</h3>
                <ul class="solution-list">
                    <li><strong>问题原因：</strong>移动端浏览器工具栏(地址栏/底部工具栏)会动态改变视口高度</li>
                    <li><strong>传统方案缺陷：</strong>使用100vh高度在工具栏出现时会导致实际内容区域计算错误</li>
                    <li><strong>本页解决方案：</strong>
                        <ol>
                            <li>使用JavaScript动态计算真实视口高度</li>
                            <li>设置CSS变量 --app-height 代替100vh</li>
                            <li>监听窗口resize和orientationchange事件</li>
                            <li>输入框聚焦时自动滚动到可视区域</li>
                        </ol>
                    </li>
                </ul>
            </div>
            
            <div class="note">
                <strong>提示：</strong> 在移动设备上点击输入框测试效果，软键盘弹出时输入框将保持在可视区域
            </div>
        </div>
        
        <footer>
            <p>H5移动端开发最佳实践 | 输入框遮挡问题解决方案</p>
        </footer>
    </div>

    <script>
        // 设置应用高度
        function setAppHeight() {
            const doc = document.documentElement;
            doc.style.setProperty('--app-height', `${window.innerHeight}px`);
            
            // 添加视口高度显示（仅用于演示）
            const footer = document.querySelector('footer p');
            if (footer) {
                footer.innerHTML = `当前视口高度: ${window.innerHeight}px | 解决方案演示`;
            }
        }
        
        // 初始化设置
        setAppHeight();
        
        // 监听窗口大小变化和屏幕方向变化
        window.addEventListener('resize', setAppHeight);
        window.addEventListener('orientationchange', setAppHeight);
        
        // 输入框聚焦时确保在可视区域
        const inputs = document.querySelectorAll('input, textarea');
        inputs.forEach(input => {
            input.addEventListener('focus', () => {
                // 添加延迟确保在软键盘弹出后执行
                setTimeout(() => {
                    input.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }, 300);
            });
        });
        
        // 点击提交按钮
        document.querySelector('.btn-submit').addEventListener('click', () => {
            alert('表单提交功能演示\n此解决方案已成功应用！');
        });
    </script>
</body>
</html>

解决方案关键技术点

CSS变量动态高度
- 使用 --app-height 自定义变量代替 100vh
- 容器高度设置为 min-height: var(--app-height)

JavaScript动态计算高度

function setAppHeight() {
    document.documentElement.style.setProperty(
        '--app-height', 
        `${window.innerHeight}px`
    );
}

事件监听

-   监听 `resize` 和 `orientationchange` 事件

-   在窗口大小变化或屏幕方向改变时更新高度

输入框聚焦处理

input.addEventListener('focus', () => {
    setTimeout(() => {
        input.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }, 300);
});

使用说明

在移动设备上打开此页面（或使用Chrome开发者工具切换到移动端视图）
点击页面底部的输入框
观察软键盘弹出时输入框是否自动滚动到可视区域
尝试在输入框之间切换，体验流畅的焦点切换效果

这个解决方案完美处理了移动端H5页面中100vh高度导致的输入框遮挡问题，同时提供了优雅的UI设计和用户体验。