座機: 029-81773686 熱線: 18966895139 聯系我們
網頁制作、網絡營銷、維護推廣、手機網站制作一站式解決方案
十分感謝六年來與我們攜手共進的朋友們、客戶們!切換新版
手機版底部固定導航被輸入法頂起遮蓋頁面內容的解決辦法?
添加時間:2020-08-10  點擊率:10次

在一般的App,手機商城頁面中,都會有固定于屏幕底部的快捷導航。它是采用基于屏幕大小進行固定定位的方法實現的,但是在手機使用輸入法時,輸入法會占用屏幕底部一部分位置,這是就回造成導航上浮,貼在輸入法上方,遮蓋頁面內容,給瀏覽者造成極不好的使用體驗。


 

關于這個問題方法:
我們根據輸入法改變頁面大小的原理進行樣式調整。

我們先預設一個樣式


 

然后根據屏幕變化的原理給底部去添加或移除這個樣式。


 
這樣的輸入法打開時,會將底部置于內容的最底部,就不會遮蓋內容了。輸入法取消時底部回復原來的樣式。
但在iphon手機上還會出現另一個問題。iPhone手機的返回和前進按鈕也是置于屏幕底部的,在內容上下滑動同樣會造成屏幕大小改變,類似輸入法打開與關閉。所以使用這種方法時會造成上下瀏覽頁面時,固定的底部導航也上下跳動。

這里我們使用一個小技巧,利用輸入法于手機按鈕高度差的方法巧妙的避開這個問題。


 
一般的輸入法高度都會超過150px,iphon手機的返回按鈕一般100px左右。所以我們可以認為當屏幕高度的變化超過150px時即是輸入法打開了,所以去給底部導航添加預設樣式。

?
版權所有 ? 西安宏博網絡,并保留所有權利 陜ICP備10007014號-8
展開客服
贵州体彩11选5