[英]position: fixed doesn't work on chrome/firefox mobile mockup (and mobile), but works when I resize window
这个问题在 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 文档的<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
似乎minimum-scale-1是关键部分。
只需删除媒体查询 css 即可
如果我正确理解了解释，问题似乎来自width: 100vw上的width: 100vw 。 删除它可以解决问题吗？
固定数据位置无法在BlackBerry中使用jquery mobile工作
[英]Data position fixed doesn't work using jquery mobile in BlackBerry
如果元素的宽度超过设备的高度，则“ position：fixed”在Mobile Safari上不起作用
[英]`position: fixed` doesn't work on Mobile Safari if an element's width exceeds device's height
bootstrap3.02：表格响应不适用于手机，但适用于Firefox
[英]bootstrap3.02: table-responsive doesn't work in mobile phone, but works in firefox
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.