位置：固定在 chrome/firefox 移动模型（和移动）上不起作用，但在我调整窗口大小时起作用答案

【问题标题】：position: fixed doesn't work on chrome/firefox mobile mockup (and mobile), but works when I resize window位置：固定在 chrome/firefox 移动模型（和移动）上不起作用，但在我调整窗口大小时起作用
【发布时间】：2020-11-06 11:42:51
【问题描述】：

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 仍然有效。请注意顶部的徽标是如何裁剪的，这意味着我向下滚动。实际上，我可以使宽度变得非常窄，并且在不滚动侧边栏的情况下滚动很远。

点击模型窗口后

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

【问题讨论】：

标签： html css position css-position

【解决方案1】：

这有点晚了，但我在不久前解决了这个问题，将此行添加到 html 文档的 <head> 中

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

似乎minimum-scale-1 是关键部分。

【讨论】：

谢谢，它帮我省了很多调查！这似乎很棘手，因为它仅在为我向上滚动时才有效，而不是向下滚动

【解决方案2】：

只需删除媒体查询 css 就可以了

【讨论】：

嗯...首先它应该只显示在移动设备上。其次，它仍然不起作用。只是为了测试它，我删除了媒体查询，但只要我点击移动模型按钮，侧边栏仍会随着页面全宽滚动。

【解决方案3】：

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

【讨论】：