[發明專利]移動端頁面布局的適配方法、裝置和計算機設備

有效

• 申請號: 202110738666.7
• 申請日: 2021-06-30
• 公開（公告）號: CN113325984B
• 公開（公告）日: 2022-11-25
• 發明（設計）人: 劉丹
• 申請（專利權）人: 中國平安人壽保險股份有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F3/04812;G06F3/0482;G06F3/04886
• 代理公司: 深圳市明日今典知識產權代理事務所(普通合伙) 44343
• 代理人: 王杰輝;熊成龍

1.一種移動端頁面布局的適配方法，其特征在于，包括：

判斷移動端是否為ios系統；

若為ios系統，檢測頁面中的輸入框底部至所述移動端的主屏幕底部之間的第一距離，并判斷所述輸入框是否接收到輸入信號；

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

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

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

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

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

2.根據權利要求1所述的移動端頁面布局的適配方法，其特征在于，所述檢測頁面中的輸入框底部至所述移動端的主屏幕底部之間的第一距離的步驟包括：

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

根據所述輸入框元素獲取所述輸入框的高度；

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

獲取主屏幕的整體高度；

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

3.根據權利要求1所述的移動端頁面布局的適配方法，其特征在于，所述若所述輸入框接收到輸入信號，則彈起軟鍵盤并檢測所述軟鍵盤頂部與所述主屏幕底部之間的第二距離的步驟包括：

持續監聽輸入框是否處于輸入狀態；

若處于輸入狀態，在預設延時時間到達之后，獲取主屏幕的整體高度與主屏幕內除所述軟鍵盤外的高度；

計算所述主屏幕的整體高度與所述主屏幕內除所述軟鍵盤外的高度之間的差值，得到第二距離。

4.根據權利要求1所述的移動端頁面布局的適配方法，其特征在于，將所述當前最外層容器置于所述軟鍵盤頂部，并控制頁面的頭部回滾到所述當前最外層容器的頭部的步驟包括：

判斷輸入框與軟鍵盤之間是否存在空白區域；

若存在，將所述當前最外層容器置于所述軟鍵盤頂部，并控制頁面的頭部回滾到所述當前最外層容器的頭部，所述空白區域跟隨所述頁面向下回滾至所述軟鍵盤的底層。

5.根據權利要求1所述的移動端頁面布局的適配方法，其特征在于，所述將所述當前最外層容器置于所述軟鍵盤頂部，并控制頁面的頭部回滾到所述當前最外層容器的頭部的步驟之后，包括：

判斷輸入框是否處于輸入狀態；

若輸入框處于輸入狀態，判斷預先與頁面執行滾動行為綁定的操作是否被執行；

若所述頁面執行滾動行為綁定的操作被執行，則收起所述軟鍵盤；

設置所述當前最外層容器的高度為所述初始最外層容器的初始高度。

6.根據權利要求1所述的移動端頁面布局的適配方法，其特征在于，所述將所述當前最外層容器置于所述軟鍵盤頂部，并控制頁面的頭部回滾到所述當前最外層容器的頭部的步驟之后，還包括：

獲取所述主屏幕的寬度；

獲取所述頁面的寬度；

判斷所述主屏幕的寬度與所述頁面的寬度是否相等；

若所述主屏幕的寬度與所述頁面的寬度不相等，對所述頁面進行排版，使得排版后的所述頁面的寬度與所述主屏幕的寬度相匹配。