手機版底部固定導航被輸入法頂起遮蓋頁面內容的解決辦法?

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

關于這個問題方法：

我們根據輸入法改變頁面大小的原理進行樣式調整。

我們先預設一個樣式

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

這樣的輸入法打開時，會將底部置于內容的最底部，就不會遮蓋內容了。輸入法取消時底部回復原來的樣式。

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

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

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