H5移動端底部固定ios相容

2021-10-13 21:55:34 字數 398 閱讀 7179

問題

一、之前寫的底部導航欄固定用的是絕對定位(fixed)做的,在安卓是沒問題的,但在ios無法固定住(原因:安卓是相對瀏覽器做的定位,ios是相對滾動條做的定位,這個原因不是很確定啦,表述可能會有問題,看到的小夥伴可以略過啦~)

解決方法:頁面中不使用絕對定位(fixed),改為頁面100%布局。

.header

.content

.footer

問題二、ios底部固定的問題就解決,然後發現固定的位置在ios中距離底部還有一段距離

解決方法:新增viewport-fit=cover,使頁面佔滿整個螢幕,加index.html頁面

移動端底部導航欄固定 相容IOS

問題 移動端前端底部導航欄設計 相容安卓下的各種瀏覽器和ios自帶的safari,但是不相容蘋果下的 釘釘。具體 格式 內容 內容 內容 css樣式 body header content footer 這樣寫下來,在安卓的一系列瀏覽器和釘釘上面是正常的 在ios的一系列瀏覽器上是正常的,但是在釘釘...

h5移動端適配

原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...

移動端h5優化

1 減少js載入體積 很多庫能用cdn的盡量使用cdn,這樣打包出來的js體積會很小,載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui,mintui等 4 儘量減少網路請求數量 程式中的資料,有的能乙個介面返回的盡量乙個介面返回,不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...