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

2022-06-25 15:06:19 字數 718 閱讀 9080

問題:移動端前端底部導航欄設計 相容安卓下的各種瀏覽器和ios自帶的safari,但是不相容蘋果下的 釘釘。

具體**格式:

內容 內容

內容

css樣式:

body

.header

.content

.footer

這樣寫下來,在安卓的一系列瀏覽器和釘釘上面是正常的 。在ios的一系列瀏覽器上是正常的,但是在釘釘上面,拖動的時候會導致底部導航欄也跟著拖動。這個問題困擾了我好幾天,明明只是個小bug!

在網上找了很多資料,比如動態的改變底部導航欄的top值:

這樣寫,確實有效果,但是在ios下面會出現底部導航欄閃現閃出的效果,這樣寫使用者體驗性也會不好,所以排除了。

後來換種思路,body不可拖動,只拖動內容部分,底部導航欄不可拖動,改了一下content的樣式

.content

這樣寫在ios下的釘釘初步可以了,但是只要蘋果自帶的上拉工具框出現就會導致底部導航欄再次跟著拖動。所以這個問題並未真正意義上的解決。

ps:釘釘自己的核心環境是chorme,但是我在蘋果上的chorme上執行是正常的。搞不懂釘釘。

aylson.fu

出處:

H5移動端底部固定ios相容

問題 一 之前寫的底部導航欄固定用的是絕對定位 fixed 做的,在安卓是沒問題的,但在ios無法固定住 原因 安卓是相對瀏覽器做的定位,ios是相對滾動條做的定位,這個原因不是很確定啦,表述可能會有問題,看到的小夥伴可以略過啦 解決方法 頁面中不使用絕對定位 fixed 改為頁面100 布局。he...

移動端H5固定底部導航選單的三種布局實現

需求 需要把導航固定在底部?只能滑動內容,導航選單固定不動的。效果如下 滾動區域 底部固定選單 方法一 使用fixed box footer 滾動區域留下底部導航高度的padding距離 底部導航fixed固定定位到底部 設定z index 999因為底部定位為fixed或absolute的時候,出...

移動端 ios 長按複製相容方案

移動端頁面,需要複製一段文字碼。在ios中,長按文字區域,預設選中的範圍,超出了我長按的文字區域,把上面的和下面的另乙個div的文字也給我包含進來了,並不是我想要的!舉個例子 如下圖 1.我長按的區域是紅色方框內的區域,想要複製框裡的文字內容。2.結果卻是下圖,即便 ios 上能再稍微操作一下 變成...