位置：固定在 chrome/firefox 移动模型（和移动设备）上不起作用，但在调整窗口大小时起作用
Sam*_*Liu 4 html css position css-position
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不再起作用，侧边栏随页面滚动。
Sam*_*Liu 14
这有点晚了，但我不久前就解决了这个问题，并将这一行添加到<head>html 文档中
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
看来这minimum-scale-1是关键部分。