移动端position:fixed;的兼容问题

pc端的网页,宽度必须是1200px,允许用户缩放,.topbar为相对于浏览器窗口浮动。

[正常]在PC端Chrome模拟手机、移动端Safari、微信缩放效果如下。

clipboard.png

[错误]但是在安卓自带、UC中显示这样的,看了下应该是相对文档宽度

clipboard.png

简化代码如下,实际环境看这里

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body{
            width:1200px;
        }
        .topbar{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="topbar"></div>
</body>
</html>

理论上说position: fixed;是相对于浏览器窗口的,不会出现第二种情况,但实际展示确实这样。
我没有想到好的解决方案,求助。

阅读 8.3k
1 个回答

clipboard.png

clipboard.png

clipboard.png

这里有一个宽度固定值 导致不是100%

补充:
图片描述

这里的效果不满足需求吗?

clipboard.png

所以不用做width赋值操作了, 直接给width: auto就可以了.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏