宏博網絡 | 專注互聯網品牌一站式服務

Thank you for visiting

029-81773686

全網開發&整合營銷服務商

CopyRight
?HOOBOO All rights reserved

全網開發&整合營銷服務商

029-81773686

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

2020.08.10

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


 01.png


關于這個問題方法:

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

我們先預設一個樣式

02.png

 

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

03.png

 

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

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

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

04.png

 

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


上一篇:關于網站中的標準字體和特殊字體?

下一篇:西安網絡公司,小宏教您防止網站被iframe內框架調用的方法?

CopyRight ? HOOBOO   備案號:陜ICP備10007014號-9   站點地圖 免責聲明:本網站部分資源來源于網絡,如有侵權,請聯系我們告知刪除,我們將會盡快處理,謝謝!本站不承擔任何法律責任。

东北麻将算钱规则图 山西11选5任2推荐 怎样申请河北麻将代理 江西时时彩无法兑奖 彩票平台出黑可靠吗 上海快3今天预测 陕西快乐十分规则 下载德州麻将 上海时时彩查开奖结果查询结果-首页 2018年31选7中奖规则 辽宁35选7第123期开奖结果查询 2021年免费码报图库 体育彩票超级大乐透走势图 网赚骗局大揭秘 吉林11选5号码遗漏 竞彩比分直播 即时比分 新浪 比特币购买软件