gpt4 book ai didi

html - 位置:固定在 chrome/firefox 移动模型(和移动设备)上不起作用,但在我调整窗口大小时起作用

转载 作者:行者123 更新时间:2023-12-02 02:38:55 25 4
gpt4 key购买 nike

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 不再起作用。

我在手机上进行了部署和检查,边栏随手机一起滚动。所以这不仅仅是浏览器模型问题。


问题演练:
  1. 调整浏览器大小。 position: fixed 仍然有效。请注意顶部的 Logo 是如何裁剪的,这意味着我向下滚动。实际上,我可以让宽度变窄,并且在不滚动侧边栏的情况下滚动很远。

resize window. notice the cropped logo, which means I already scrolled

  1. 点击模拟窗口后

mobile mockup button

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

enter image description here

最佳答案

这有点晚了,但我不久前将此行添加到 <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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com