[發明專利]H5頁面制作兼容顯示的方法、裝置、終端設備及存儲介質

有效

• 申請號: 201710862836.6
• 申請日: 2017-09-22
• 公開（公告）號: CN107608668B
• 公開（公告）日: 2021-02-05
• 發明（設計）人: 周文
• 申請（專利權）人: 網易（杭州）網絡有限公司
• 主分類號: G06F8/34
• 分類號: G06F8/34;G06F8/38;G06F16/957
• 代理公司: 深圳新創友知識產權代理有限公司 44223
• 代理人: 江耀純

1.一種H5頁面制作兼容顯示的方法，其特征在于，包括以下步驟：

檢測被選中的元素；

當監聽到移動所述元素的事件時，實時獲取所述元素在頁面中的位置；其中，所述頁面包括H5編輯界面；

根據所述元素在頁面中的位置判斷所述元素位于所述H5編輯界面內；

實時動態計算位于所述H5編輯界面內的所述元素在預設終端庫中的多款終端設備上的顯示情況，從而實時判斷所述元素在頁面中的位置是否超過所述多款終端設備中的任一款的預設可視區域；

當判斷所述元素在所述頁面中的位置超出所述任一款的預設可視區域時，顯示超出范圍的提示信息。

2.根據權利要求1所述的H5頁面制作兼容顯示的方法，其特征在于，所述根據所述元素在頁面中的位置判斷所述元素位于所述H5編輯界面內，具體為：

根據所述元素在頁面中的位置、所述元素的長和寬及所述H5編輯界面在所述頁面中的相對位置，判斷所述元素位于所述H5編輯界面內。

3.根據權利要求1所述的H5頁面制作兼容顯示的方法，其特征在于，所述H5編輯界面以頂部所在的直線為第一基準線，以任一垂直邊緣所在的直線為第二基準線；

則所述當判斷所述元素在所述頁面中的位置超出手機信息庫中任一款手機的可視區域時，顯示超出范圍的提示信息具體包括：

當根據所述元素在頁面中的位置及所述第一基準線判斷所述元素超出手機信息庫中任一款手機的屏幕可視高度時，顯示輔助線以標注該手機的屏幕可視高度；和/或

當根據所述元素在頁面中的位置及所述第二基準線判斷所述元素超出手機信息庫中任一款手機的屏幕可視寬度時，顯示輔助線以標注該手機的屏幕可視寬度。

4.根據權利要求1所述的H5頁面制作兼容顯示的方法，其特征在于，所述H5編輯界面以頂部所在的直線為第一基準線，以任一垂直邊緣所在的直線為第二基準線；

則所述當判斷所述元素在所述頁面中的位置超出手機信息庫中任一款手機的可視區域時，顯示超出范圍的提示信息具體包括：

當根據所述元素在頁面中的位置、所述元素的長度及所述第一基準線判斷所述元素超出手機信息庫中任一款手機的屏幕可視高度時，顯示輔助線以標注該手機的屏幕可視高度；和/或

當根據所述元素在頁面中的位置、所述元素的寬度及所述第二基準線判斷所述元素超出手機信息庫中任一款手機的屏幕可視寬度時，顯示輔助線以標注該手機的屏幕可視寬度。

5.根據權利要求1至4任意一項所述的H5頁面制作兼容顯示的方法，其特征在于，所述當監聽到移動所述元素的事件時，實時獲取所述元素在頁面中的位置具體為：

當監聽到通過操控介質移動所述元素的事件時，實時獲取所述操控介質在頁面中的位置以及所述操控介質相對于所述元素的位置；

根據所述操控介質在所述頁面中的位置以及所述操控介質相對于所述元素的位置，獲取所述元素在頁面中的位置。

6.一種H5頁面制作兼容顯示的裝置，其特征在于，包括：

檢測模塊，用于檢測被選中的元素；

位置獲取模塊，用于當監聽到移動所述元素的事件時，實時獲取所述元素在頁面中的位置；其中，所述頁面包括H5編輯界面；

位置判斷模塊，用于根據所述元素在頁面中的位置判斷所述元素位于所述H5編輯界面內，并實時動態計算位于所述H5編輯界面內的所述元素在預設終端庫中的多款終端設備上的顯示情況，從而實時判斷所述元素在頁面中的位置是否超過所述多款終端設備中的任一款的預設可視區域；

信息提示模塊，用于當判斷所述元素在所述頁面中的位置超出所述任一款的預設可視區域時，顯示超出范圍的提示信息。

7.根據權利要求6所述的H5頁面制作兼容顯示的裝置，其特征在于，所述位置判斷模塊，具體包括：

根據所述元素在頁面中的位置、所述元素的長和寬、所述H5編輯界面在所述頁面中的相對位置，判斷所述元素位于所述H5編輯界面內。