移动端自拍扫描页面滚动异常，按钮需滚动可见问题求助

问题分析 #

你的自拍扫描页面在移动端出现垂直滚动，核心原因有三点：

1. 100vh 在移动端会受浏览器地址栏/工具栏影响，实际可用高度小于计算值，导致内容溢出
2. .webcam 设置 width:100vw 会包含滚动条宽度，触发横向滚动并间接打乱垂直布局
3. 未清除 html/body 的默认边距，额外占用屏幕空间

解决方案 #

1. 添加正确的视口标签

在项目根HTML文件（如index.html）中添加，确保移动端布局适配：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. 修改CSS样式，适配移动端动态视口

替换原CSS为以下代码，使用动态视口高度dvh替代vh，并调整元素尺寸：

/* 清除全局默认边距，防止溢出 */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.selfie-scan-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 使用dvh（动态视口高度），自动适配浏览器地址栏变化 */
    height: calc(100dvh - 65px);
    overflow: hidden; /* 强制隐藏溢出内容 */

    .webcam-container {
        width: 100%;
        display: flex;
        gap: 20px; /* 减少gap避免高度溢出 */
        align-items: center;
        flex-direction: column;
        position: relative;
        height: 100%; /* 占满父元素高度 */

        .webcam {
            max-height: calc(100dvh - 185px); /* 预留顶部导航和底部按钮空间 */
            width: 100%;
            object-fit: cover; /* 视频/图片自适应容器，不变形 */
        }

        .btn-position {
            position: absolute;
            bottom: 2rem;
            z-index: 10; /* 确保按钮在最上层 */

            .camera-btn,
            .retake-btn,
            .submit-btn {
                height: 60px;
                width: 60px;
                font-size: 25px;
                border-radius: 50%;
                color: black;
                background-color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            }
        }
    }
}

/* 移动端专属优化 */
@media screen and (max-width: 768px) {
    .selfie-scan-container {
        height: 100dvh; /* 根据实际导航高度调整是否保留-65px */
    }
    .webcam-container .webcam {
        max-height: calc(100dvh - 120px); /* 适配移动端按钮区域高度 */
    }
}

3. 组件内Webcam元素优化（可选）

给Webcam添加样式确保视频流自适应容器：

<Webcam
    mirrored
    audio={false}
    ref={webcamRef}
    className="webcam"
    screenshotFormat="image/jpeg"
    style={{ width: '100%', height: '100%' }}
/>

修改完成后，移动端页面会完全适配屏幕，无垂直滚动，底部按钮始终可见。

内容的提问来源于stack exchange，提问作者Osama Aslam