我看到很多帖子面临这样的问题：添加
position:fixedminimum-scale=1.0minimum-scaleinitial-scaleinitial-scaleminimum-scaleminimum-scale这里有一些帖子提出了同样的问题，并通过添加最小规模来解决。他们都没有给出这样做的原因：（有评论提到可能是宽度超过 100vw 的组件导致了问题，就是这种情况，但它仍然没有给出添加
minimum-scale这是我的测试代码（在移动设备上，删除
minimum-scale=1.1position:fixed.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;
}<!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>我按照我的理解来解释一下。
视口元标记在 2008 年至 2014 年之间出现在 html5 中，而该元标记在 html4 中不存在。他们引入 HTML5 意味着由于移动设备的出现，它是必要的。那时，您在许多移动设备上打开网站时都可以看到水平滚动条，因为桌面网站内容的宽度会比移动设备高得多。 （他们也不会给出百分比宽度）
对于桌面设备，我们都知道屏幕宽度只不过是分辨率的宽度部分给出的像素数。例如，如果分辨率是1920 x 1080，它明确指出屏幕尺寸是1920px。
但对于移动设备来说，情况并非如此。例如，移动设备的分辨率可能是 1080 x 2400 像素。但是当我们在mediascreen css中编写时，同样的1080px将被移动设备视为412px。而且这个 1080/420 比例并不是对所有设备都是固定的。这个比例因品牌而异。有一种叫做分辨率的东西，是由移动制造商指定的。也就是说，如果分辨率为2.6，则意味着宽度1080像素将被视为412px（1080 /412 = 2.6）。如果分辨率为 3，则宽度 1080 像素将被视为 360 像素（1080/3 = 360）。通过调整这一点，所有移动设备都可以理解 px 中的单个 css。
这里其他位置属性，即绝对、相对和所有都是元素相对于内容的位置。但是位置：固定是相对于视口的。例如，如果您提到“position:absolute;top:0;right:100px;” - 使用旧系统 - 在较小宽度的显示器中，如果内容宽度大于显示器宽度，您必须向右滚动才能看到这一点。但如果你提到，“position:fixed;right:100px”意味着，无论内容大小如何，元素都将放置在距视口右端 100px 的位置。
所以自然地，只有在视口元标记出现之后，视口相关属性才能正常工作。