Android端Chrome设置body height:100%却超出视口问题求助

快速修复方案 #

• 必须添加viewport元标签到<head>，这是移动端页面适配的核心：

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

• 给html和body追加overflow: hidden，消除潜在滚动空间导致的溢出：

html, body{ 
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

问题根源 #

这不是设备硬件问题，是Android Chrome的虚拟视口机制导致的：

• 没有viewport元标签时，Chrome默认会使用一个宽于设备实际视口的虚拟尺寸（比如980px），再缩放适配到设备宽度，这会让100%的尺寸计算出现偏差，加上body的1px边框，就会触发溢出或滚动。
• 部分场景下，Chrome地址栏的动态隐藏/显示会短暂影响视口高度，但你的问题核心还是viewport配置缺失。

修改后的完整代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{
                box-sizing: border-box;
            }
            html, body{ 
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            body{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>

    </body>
</html>

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