为何设置minimum-scale可修复移动端position:fixed失效问题？

很多开发者都会碰到这个问题：给div设置position:fixed后，在移动端浏览器中元素仍会随页面滚动移动，而设置viewport的minimum-scale=1.0就能解决（实测将minimum-scale与initial-scale设为相同值，或者同时移除这两个参数也能修复）。按定义，minimum-scale仅用于定义页面的最小缩放比例，为什么这个设置能修复position:fixed失效的问题？

已有不少讨论提到这个解法，但都没说明原理——有评论指出可能是页面中存在宽度超过100vw的组件导致，这正好是我遇到的情况，但还是没解释清楚minimum-scale起作用的原因。

问题原理解析 #

核心原因在于移动端浏览器的视口缩放与布局视口的联动机制，以及position:fixed的定位逻辑：

1. 溢出元素触发的动态视口调整：当页面存在宽度超过100vw的元素（比如测试代码里的.placeholder设置了101vw），浏览器会自动扩展布局视口的宽度来容纳这个溢出元素。如果此时viewport没有锁定缩放规则（比如未设置minimum-scale，或minimum-scale与initial-scale不匹配），用户滚动页面或进行操作时，浏览器可能会触发动态的视口调整，导致position:fixed元素的定位基准（布局视口）发生变化，最终表现为固定元素跟着移动。

2. 锁定缩放稳定布局视口：将minimum-scale与initial-scale设为相同值，相当于锁定了页面的缩放范围，强制浏览器始终保持初始的布局视口大小，不会因为溢出元素而动态调整视口宽度。此时position:fixed的定位基准稳定，元素就能保持固定在视口的对应位置。

3. 默认视口规则的适配：如果同时移除initial-scale和minimum-scale，浏览器会采用默认的视口处理逻辑，通常也会避免为了适配溢出元素而动态调整视口，同样能让固定定位的元素保持稳定。

测试代码 #

CSS代码 #

.mylist {
    min-height: 100vh;
    height: 100vh;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    width: 100vw;
}

.placeholder {
    height: 150vh;
    width: 101vw;
    justify-content: center;
    align-items: center;
    display: flex;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.1, minimum-scale=1.1">
    <title>Sample</title>
</head>
<body>
    <div class="placeholder">TEST</div>
    <div class="mylist">
        <ul>
            <li>t0</li>
            <li>t1</li>
            <li>t2</li>
        </ul>
    </div>
</body>
</html>

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