您的位置:首页技术文章
文章详情页

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

【字号: 日期:2024-02-27 14:51:14浏览:27作者:猪猪

问题描述

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

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

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

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

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

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

<!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> <p class='topbar'></p></body></html>

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

问题解答

回答1:

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

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

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

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

补充:css - 移动端position:fixed;的兼容问题

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

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

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

标签: CSS
相关文章: