我看到很多帖子都面临一个问题，即div添加position:fixed仍然在移动的浏览器上移动，并通过设置viewport minimum-scale=1.0解决。（经过一些测试，我认为通过设置minimum-scale来匹配initial-scale，或者删除initial-scale和minimum-scale，它已经被修复了）。根据定义，minimum-scale只定义了最小缩放，为什么这会解决问题？
这里有一些帖子提出了同样的问题，并通过添加最小规模来解决。他们都没有给出一个为什么这样做的原因：（有一条评论提到，可能是宽度超过100 vw的组件导致了这个问题，事实就是如此，但它仍然没有给予为什么添加minimum-scale可以解决这个问题的原因。）
- position: fixed doesn't work on chrome/firefox mobile mockup
- Position fixed on chrome mobile causing element to move on scroll up/down
- position:fixed element just not staying fixed
这是我的测试代码（在移动的上，删除minimum-scale=1.1会破坏position: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>
1条答案
按热度按时间58wvjzkj1#
我会根据我的理解来解释。
viewport Meta标签在2008年到2014年之间出现在html5中，而html 4中没有这个meta标签。他们在HTML5中引入意味着由于移动的设备的出现，它是必要的。在那些日子里，你可以在许多移动的设备中找到水平滚动条，同时打开网站，因为桌面网站的内容的宽度将远远高于移动的。（他们也不会给出宽度的百分比）
在桌面设备的情况下，我们都知道，屏幕宽度是什么，但像素的数量作为分辨率的宽度部分.例如，如果分辨率是1920 x 1080，它清楚地表明屏幕尺寸是1920 px.
但这不是移动终端的情况。例如，也许移动终端的分辨率将是1080 x 2400像素.但是当我们在mediascreen css中编写时，相同的1080 px将被移动终端视为412 px。而且这个1080/420的比例并不是对所有设备都是固定的。这个比例因品牌而异。有一种叫做分辨率的东西是由移动的制造商指定的。也就是说，如果分辨率为2.6，这意味着1080像素的宽度将被视为412 px（1080 /412 = 2.6）。如果分辨率为3，则1080 px的宽度将被视为360 px（1080/3 = 360）。通过调整这一点，px中的单个css可以被所有移动的设备理解。
这里的其他位置属性，即绝对，相对和所有都是元素相对于内容的位置。**但是位置：固定是相对于视口。例如，如果你提到“位置：绝对;上：0;右：100 px;“-与奥登系统-在一个较小宽度的显示器你必须滚动的权利，如果内容宽度超过显示器宽度，看到这一点。但如果你提到，“位置：固定; right：100 px”意味着，不管内容大小，元素将被放置在离视口右端100 px的位置。
因此，自然地，视口相关属性只有在视口元标记出现后才能正常工作。