Chrome 79中CSS vmax属性异常？移动端正方形页面适配问题

结合你提供的代码、环境信息和问题现象，我来帮你定位并解决这个适配问题：

问题核心原因 #

1. 缺失移动视口元标签：你的代码里没有添加<meta name="viewport">，这是移动设备适配的基础——没有它，移动浏览器（包括桌面端的设备模拟模式）会默认按桌面视口缩放页面，导致vmax单位的计算完全偏离预期。
2. 未设置box-sizing: border-box：默认CSS的box-sizing为content-box，这意味着.div1的padding:1vmax会额外加到100vmax的宽高上，让元素实际尺寸变成102vmax，直接超出视口范围，破坏了正方形布局。

修复后的完整代码 #

<html>
<head>
    <!-- 添加移动视口元标签，强制浏览器使用设备实际宽度渲染 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 全局设置box-sizing，让padding/border包含在元素宽高内 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            background: black;
            /* 让body占满视口，避免多余滚动 */
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .div1 {
            /* 用vmin替代vmax，横竖屏都能保持正方形且适配视口 */
            width: 100vmin;
            height: 100vmin;
            background: red;
            padding: 1vmax;
        }
        .div2 {
            width: 100%;
            height: 100%;
            background: grey;
            border: 1vmax solid yellow;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">&nbsp;</div>
    </div>
</body>
</html>

关键改动说明 #

• 视口元标签：解决移动设备默认缩放问题，确保vmin/vmax基于正确的设备视口计算。
• 全局box-sizing：让padding和border不再额外撑开元素，完美保持你需要的尺寸比例。
• 改用100vmin：取视口宽高中较小的值作为基准，无论设备横屏还是竖屏，元素都能保持正方形且完全适配视口，不会超出屏幕范围。
• Flex居中布局：让正方形在视口中垂直水平居中，避免页面出现不必要的滚动或偏移。

这个方案在你提到的Chrome 79.0.3945.88和Opera 65.0.3467.72版本中完全兼容，这些版本早已支持上述所有CSS特性。

内容的提问来源于stack exchange，提问作者Евгений