Chrome 和 Firefox 都有这个问题
我有一个不应该随页面滚动的仅限移动设备的侧边栏。基本上是这样的:
body{
font-size: 16px;
width: 100vw;
height: 200vh;
background-color: orange;
}
.sideBar{
height: 100vh;
position: fixed;
background-color: blue;
left: 0;
top: 0;
width: 10rem;
}
/* media query for desktop. change the min-width */
@media screen and (min-width: 450px){
.sideBar{
position: static;
height: 20vh;
}
}<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="sideBar">
Hello
</div>
</body>
</html>当我将窗口调整为窄尺寸时，它按预期工作。侧边栏不随页面滚动。但是当我点击移动模型按钮时，position: fixed 不再起作用。
我在手机上进行了部署和检查，边栏随手机一起滚动。所以这不仅仅是浏览器模型问题。
问题演练:
- 调整浏览器大小。
position: fixed仍然有效。请注意顶部的 Logo 是如何裁剪的，这意味着我向下滚动。实际上，我可以让宽度变窄，并且在不滚动侧边栏的情况下滚动很远。
- 点击模拟窗口后
position: fixed不再起作用，侧边栏随页面滚动。
最佳答案
这有点晚了，但我不久前将此行添加到 <head> 中解决了这个问题html文件的
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
似乎是 minimum-scale-1是关键部分。
关于html - 位置:固定在 chrome/firefox 移动模型(和移动设备)上不起作用，但在我调整窗口大小时起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63926484/