成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁技術文章
文章詳情頁

css - 移動端position:fixed;的兼容問題

瀏覽:100日期:2024-02-27 14:51:14

問題描述

pc端的網(wǎng)頁,寬度必須是1200px,允許用戶縮放,.topbar為相對于瀏覽器窗口浮動。

[正常]在PC端Chrome模擬手機、移動端Safari、微信縮放效果如下。

css - 移動端position:fixed;的兼容問題

[錯誤]但是在安卓自帶、UC中顯示這樣的,看了下應該是相對文檔寬度

css - 移動端position:fixed;的兼容問題

簡化代碼如下,實際環(huán)境看這里

<!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;是相對于瀏覽器窗口的,不會出現(xiàn)第二種情況,但實際展示確實這樣。我沒有想到好的解決方案,求助。

問題解答

回答1:

css - 移動端position:fixed;的兼容問題

css - 移動端position:fixed;的兼容問題

css - 移動端position:fixed;的兼容問題

這里有一個寬度固定值 導致不是100%

補充:css - 移動端position:fixed;的兼容問題

這里的效果不滿足需求嗎?

css - 移動端position:fixed;的兼容問題

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

標簽: CSS
相關文章: