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

有效

• 申請?zhí)枺?/td>: 201710862836.6
• 申請日: 2017-09-22
• 公開（公告）號: CN107608668B
• 公開（公告）日: 2021-02-05
• 發(fā)明（設計）人: 周文
• 申請（專利權）人: 網(wǎng)易（杭州）網(wǎng)絡有限公司
• 主分類號: G06F8/34
• 分類號: G06F8/34;G06F8/38;G06F16/957
• 代理公司: 深圳新創(chuàng)友知識產(chǎn)權代理有限公司 44223
• 代理人: 江耀純

本發(fā)明公開了一種H5頁面制作兼容顯示的方法，包括以下步驟：檢測被選中的元素；當監(jiān)聽到移動所述元素的事件時，實時獲取所述元素在頁面中的位置；其中，所述頁面包括H5編輯界面；根據(jù)所述元素在頁面中的位置判斷所述元素位于所述H5編輯界面內(nèi)；當判斷所述元素在所述頁面中的位置超出任一預設的可視區(qū)域時，顯示超出范圍的提示信息。本發(fā)明還提供了一種H5頁面制作兼容顯示的裝置、終端設備及存儲介質(zhì)，實時動態(tài)計算H5頁面元素在不同終端設備的顯示情況，輔助H5頁面制作，達到H5頁面在不同終端設備兼容顯示的目的。

技術領域

本發(fā)明涉及H5頁面制作領域，尤其涉及一種H5頁面制作兼容顯示的方法、裝置、終端設備及存儲介質(zhì)。

背景技術

H5頁面是指基于HTML5制作的頁面。HTML5的設計目的是為了在移動設備上支持多媒體，新的語法特征被引進以支持這一點，如video、audio和canvas標記。HTML5還引進了新的功能，可以真正改變用戶與文檔的交互方式。

由于HTML5賦予了網(wǎng)頁更好的意義和結構，因此基于HTML5開發(fā)的H5頁面也越來越廣泛地應用在招聘宣傳、新品宣傳、活動宣傳、活動抽獎，活動投票等場景下。許多公司看到了其中的商機，H5頁面制作工具如雨后春筍般涌現(xiàn)出來。

在利用H5頁面制作工具制作H5頁面的過程中，由于需要考慮到不同機型的手機的尺寸問題，因此需要對頁面元素的擺放位置進行調(diào)整，以避免某些位于頁面邊緣的頁面元素無法完全顯示。現(xiàn)有技術一般有如下兩種解決方案：第一種方案如圖1所示，直接在元素信息中，觀察最下方元素的位置和尺寸信息，根據(jù)不同機型的手機屏幕的長寬的不同比例，自行計算后調(diào)整元素位置；第二種方案是在H5頁面顯示時使用長頁面，用戶可以拖動頁面來觀看到完整的頁面。

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

上述第一種方案的缺點是：需要通過頁面制作者自行計算不同機型的長寬比例，在自行拖放元素時，人為控制元素位置和大小，非常不方便，也不準確，操作難度大。

上述第二種方案的缺點是：長頁面雖然可以避免元素被遮擋，但是需要用戶拖動頁面，增加了用戶的操作，用戶體驗不佳。

針對上述問題，本發(fā)明的目的在于提供一種H5頁面制作兼容顯示的方法、裝置、終端設備及存儲介質(zhì)，在制作H5頁面時，能實現(xiàn)H5頁面在不同手機機型兼容顯示的目的。

本發(fā)明提供了一種H5頁面制作兼容顯示的方法，包括以下步驟：

檢測被選中的元素；

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

根據(jù)所述元素在頁面中的位置判斷所述元素位于所述H5編輯界面內(nèi)；

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

優(yōu)選地，所述根據(jù)所述元素在頁面中的位置判斷所述元素位于所述H5編輯界面內(nèi)，具體為：

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

優(yōu)選地，所述H5編輯界面以頂部所在的直線為第一基準線，以任一垂直邊緣所在的直線為第二基準線；

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

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

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