[發(fā)明專利]移動(dòng)端頁面布局的適配方法、裝置和計(jì)算機(jī)設(shè)備

有效

• 申請(qǐng)?zhí)枺?/td>: 202110738666.7
• 申請(qǐng)日: 2021-06-30
• 公開（公告）號(hào): CN113325984B
• 公開（公告）日: 2022-11-25
• 發(fā)明（設(shè)計(jì)）人: 劉丹
• 申請(qǐng)（專利權(quán)）人: 中國(guó)平安人壽保險(xiǎn)股份有限公司
• 主分類號(hào): G06F9/451
• 分類號(hào): G06F9/451;G06F3/04812;G06F3/0482;G06F3/04886
• 代理公司: 深圳市明日今典知識(shí)產(chǎn)權(quán)代理事務(wù)所(普通合伙) 44343
• 代理人: 王杰輝;熊成龍

本申請(qǐng)涉及網(wǎng)頁布局的技術(shù)領(lǐng)域，公開了一種移動(dòng)端頁面布局的適配方法、裝置和計(jì)算機(jī)設(shè)備，通過檢測(cè)輸入框頂部與主屏幕底部之間的第一距離、軟鍵盤與主屏幕底部之間的第二距離；若是，獲取初始最外層容器的初始高度，根據(jù)計(jì)算初始最外層容器的初始高度與第二距離之間的差值，得到初始最外層容器的變化高度值；將初始最外層容器的變化高度值設(shè)置為當(dāng)前最外層容器的高度，將當(dāng)前最外層容器置于軟鍵盤頂部，并控制頁面的頭部回滾到當(dāng)前最外層容器的頭部；這樣能夠使得主屏幕中的展示內(nèi)容縮短，并將原本飛出主屏幕頂部的內(nèi)容向下拉回到主屏幕的頂部上，從而能夠防止位于主屏幕頂部的內(nèi)容被用戶遺失，提升了IOS系統(tǒng)對(duì)頁面的適配度和用戶好感度。

技術(shù)領(lǐng)域

本申請(qǐng)涉及網(wǎng)頁布局技術(shù)領(lǐng)域，特別涉及一種移動(dòng)端頁面布局的適配方法、裝置和計(jì)算機(jī)設(shè)備。

背景技術(shù)

移動(dòng)互聯(lián)網(wǎng)技術(shù)突飛猛進(jìn)，在瀏覽器的頁面中輸入信息變得非常普遍。現(xiàn)有手機(jī)系統(tǒng)一般分為android與ios，由于兩種系統(tǒng)配置不同，因此部分瀏覽器存在無法兼容這兩種系統(tǒng)的情況。當(dāng)打開瀏覽器，且輸入框位于主屏幕的下半部分時(shí)，安卓系統(tǒng)會(huì)將輸入框與軟鍵盤懸浮在主屏幕的最外層，且主屏幕頂部的內(nèi)容會(huì)保持在原位，用戶體驗(yàn)感比較好。

然而ios系統(tǒng)中，當(dāng)用戶輸入文字，軟鍵盤彈起時(shí)，由于輸入框與軟鍵盤并沒有懸浮在主屏幕的最外層，因此，位于主屏幕頂部的內(nèi)容因?yàn)檐涙I盤彈起，會(huì)自動(dòng)向上翻滾，導(dǎo)致視覺上頁面內(nèi)容不完整，尤其是用戶在一些對(duì)話機(jī)器人的網(wǎng)頁進(jìn)行對(duì)話時(shí)，頂部一般會(huì)固定一些快捷菜單的入口，如果輸入內(nèi)容時(shí)頂部飛出屏幕，用戶就無法看到頂部的信息和入口，這樣會(huì)造成無法瀏覽頂部提示信息、無法點(diǎn)擊快捷入口的問題，影響用戶對(duì)產(chǎn)品的體驗(yàn)。

發(fā)明內(nèi)容

本申請(qǐng)的主要目的為提供一種移動(dòng)端頁面布局的適配方法、裝置和計(jì)算機(jī)設(shè)備，旨在解決現(xiàn)有技術(shù)中ios系統(tǒng)主屏幕中顯示的網(wǎng)頁內(nèi)容在軟鍵盤彈起后容易向上翻滾的技術(shù)問題。

本申請(qǐng)?zhí)岢鲆环N移動(dòng)端頁面布局的適配方法，包括：

判斷移動(dòng)端是否為ios系統(tǒng)；

若為ios系統(tǒng)，檢測(cè)頁面中的輸入框底部至所述移動(dòng)端的主屏幕底部之間的第一距離，并判斷所述輸入框是否接收到輸入信號(hào)；

若所述輸入框接收到輸入信號(hào)，則彈起軟鍵盤并檢測(cè)所述軟鍵盤頂部與所述主屏幕底部之間的第二距離；

判斷所述第一距離是否小于所述第二距離，若是，獲取初始最外層容器的初始高度，其中，所述初始最外層容器用于放置所述頁面的展示內(nèi)容；

計(jì)算所述初始最外層容器的初始高度與所述第二距離之間的差值，得到所述初始最外層容器的變化高度值；

基于所述初始最外層容器的變化高度值設(shè)置當(dāng)前最外層容器，其中，所述當(dāng)前最外層容器的高度為所述變化高度值，所述當(dāng)前最外層容器的寬度與所述初始最外層容器的寬度相同；

將所述當(dāng)前最外層容器置于所述軟鍵盤頂部，并控制頁面的頭部回滾到所述當(dāng)前最外層容器的頭部。

作為優(yōu)選，所述檢測(cè)頁面中的輸入框底部至所述移動(dòng)端的主屏幕底部之間的第一距離的步驟包括：

通過所述輸入框的ID獲取所述輸入框元素:

根據(jù)所述輸入框元素獲取所述輸入框的高度；

獲取所述輸入框頂部距離所述主屏幕頂部的第三距離；以及，

獲取主屏幕的整體高度；

利用所述主屏幕的整體高度減去所述輸入框的高度與所述第三距離之和，得到第一距離。

作為優(yōu)選，所述若所述輸入框接收到輸入信號(hào)，則彈起軟鍵盤并檢測(cè)所述軟鍵盤頂部與所述主屏幕底部之間的第二距離的步驟包括：

持續(xù)監(jiān)聽輸入框是否處于輸入狀態(tài)；