网站部署至线上服务器后移动端访问滚动底部出现黑块问题求助

问题根源 #

该移动端滚动底部黑块问题是典型的移动端动态视口高度适配失误，结合代码和现象具体原因如下：

• 缺失移动端适配必备的viewport元标签，导致浏览器无法正确识别移动设备的屏幕尺寸，首次渲染的视口高度计算错误
• 代码中给html和body设置了固定的height: 100%，这个高度是页面首次加载时的视口高度（包含浏览器顶部地址栏），向下滚动地址栏收起后，实际可用视口高度变大，但height:100%不会跟随更新，页面高度不足就会露出浏览器默认的黑色背景
• 横竖屏切换会触发浏览器全页面重绘，重新计算视口高度，所以问题会暂时消失，重新加载后又回到初始计算错误的状态
• 本地测试时多使用PC端模拟移动端，不会触发移动端浏览器地址栏收起的动态高度变化，因此无法复现问题

修复方案 #

1. 首先在HTML的<head>标签内补充viewport元标签，这是移动端适配的基础：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 修改html和body的高度设置，替换固定高度为适配动态视口的属性：

html, body {
    overflow-x: hidden;
    /* 替换原有height: 100%配置 */
    min-height: 100dvh;
}

dvh是CSS动态视口高度单位，会自动跟随移动端浏览器地址栏的收起/展开更新高度，兼容性已覆盖绝大多数主流移动端浏览器。
3. 保留body的白色背景配置，兜底避免高度不足时露出黑块，原配置无需修改：

body {
    background: #fff;
    /* 其余原有属性保留即可 */
}

4. 优化footer的定位逻辑，避免固定像素高度在不同尺寸设备上适配异常：
   当前.footer内的#end使用了绝对定位+固定margin-top:400px+固定height:590px的配置，极易在小屏/大屏手机上出现高度溢出或不足，可改为flex布局让footer自动沉底：

body {
    display: flex;
    flex-direction: column;
}
.footer {
    margin-top: auto;
    /* 其余原有属性保留，移除不必要的固定margin-top:60px配置 */
}
.footer #end {
    /* 移除原有position:absolute、固定margin-top和height属性，改为正常流式布局 */
    position: static;
    margin-top: 60px;
    height: auto;
}

内容的提问来源于stack exchange，提问作者Blaine O'neill