position: fixed 在 chrome/firefox 移动模型（和移动设备）上不起作用，但在我调整大小时起作用 window

Question

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>

当我将 window 调整为较窄的尺寸时，它按预期工作。侧边栏不随页面滚动。但是当我点击移动模型按钮时，position: fixed 不再起作用。

我部署并检查了我的 phone，侧边栏随着我的 phone 滚动。所以这不仅仅是浏览器模型问题。

问题演练：

调整浏览器大小。 position: fixed 仍然有效。请注意顶部的徽标是如何裁剪的，这意味着我向下滚动。实际上，我可以使宽度变窄并滚动很远，而无需滚动侧边栏。

点击模型后window

position: fixed 不再起作用，边栏随页面滚动。

Answer 1

只需删除媒体查询css即可

Answer 2

问题，如果我理解正确的话，问题似乎来自 width: 100vw on body。删除它可以解决问题吗？

Answer 3

这有点晚了，但我在前一段时间将此行添加到 html 文档

的 <head> 中解决了这个问题

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

看来 minimum-scale-1 是关键部分。

position: fixed 在 chrome/firefox 移动模型（和移动设备）上不起作用，但在我调整大小时起作用 window

position: fixed doesn't work on chrome/firefox mobile mockup (and mobile), but works when I resize window

html

css

position

css-position