[發明專利]一種構建響應式數據展示頁面的方法及設備、介質

在審

• 申請號: 202111151557.1
• 申請日: 2021-09-29
• 公開（公告）號: CN113836470A
• 公開（公告）日: 2021-12-24
• 發明（設計）人: 殷師哲;羅超;郭亞琨;王康;趙海興;李照川
• 申請（專利權）人: 浪潮卓數大數據產業發展有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F40/189
• 代理公司: 北京君慧知識產權代理事務所(普通合伙) 11716
• 代理人: 趙德豐

本申請公開了一種構建響應式數據展示頁面的方法及設備、介質。上述方法包括獲取數據展示頁面的設計尺寸，以及用以打開數據展示頁面的終端設備的屏幕尺寸，根據設計尺寸計算得到數據展示頁面的設計寬高比，并根據屏幕尺寸計算得到終端設備的屏幕寬高比；對設計寬高比與屏幕寬高比進行比較得到比較結果，基于比較結果對數據展示頁面進行設置得到響應于終端設備屏幕尺寸的響應式數據展示頁面。本申請公開的構建響應式數據展示頁面的方法，能夠確保用戶使用任何設備訪問打開數據展示頁面時，設備屏幕與頁面之間不會留下空白，數據展示板塊能夠響應式排布，不會出現頁面排版混亂，既提升了數據展示頁面的開發效率，又提升了用戶的體驗度。

技術領域

本申請涉及數據展示技術領域，尤其涉及一種構建響應式數據展示頁面的方法及設備、介質。

背景技術

隨著大數據技術對各行各業滲透，用戶提出了越來越多的數據統計及展示需求。由于互聯網的便利，使用Web技術對數據進行統計與展示，成為主流的選擇。Web(WorldWide Web)即全球廣域網,也稱為萬維網,是一種基于超文本和HTTP的、全球性的、動態交互的、跨平臺的分布式圖形信息系統。

目前，普遍采用數據展示屏幕對統計后的數據進行展示。現有數據展示屏幕多采取固定布局設計，無法根據不同尺寸的終端設備對展示頁面進行排版及縮放。隨著終端設備尺寸的多樣化，現有的技術無法使數據展示頁面滿足在多樣化終端設備上進行數據展示的需求。

在現有技術的實現框架下，如果設備的尺寸超過數據展示頁面的設計尺寸，則使用該設備打開頁面時，如圖1所示，設備屏幕與數據展示頁面之間將出現空白；如果設備尺寸小于數據展示頁面的設計尺寸，則使用該設備打開頁面時，如圖2所示，數據展示頁面將溢出設備屏幕，需要在一個或兩個方向上出現滾動條；如果設備尺寸比例與數據展示頁面的設計尺寸比例不同，則在展示時，容易出現排版混亂。

上述問題不利于數據展示屏幕跨設備使用，使用戶體驗度降低。因此，現在迫切需要開發一種新型的構建響應式數據展示頁面的方法及設備、介質，利用響應式數據展示屏幕，確保用戶使用任何設備訪問數據展示頁面時，設備屏幕與頁面之間不會留下空白，數據展示板塊能夠響應式排布，不會出現排版混亂，既提升數據展示頁面的開發效率，又提升用戶的體驗度。

發明內容

本說明書實施例提供了一種構建響應式數據展示頁面的方法及設備、介質，用于解決現有技術中的如下技術問題：在現有技術的實現框架下，由于數據展示頁面的設計布局固定，難以滿足在多樣化終端設備上進行數據展示的需求。

本說明書實施例采用下述技術方案：

一種構建響應式數據展示頁面的方法，其中，所述方法包括：

獲取所述數據展示頁面的設計尺寸，以及用以打開所述數據展示頁面的終端設備的屏幕尺寸，其中，所述設計尺寸至少包括所述數據展示頁面設計寬度的像素值與設計高度的像素值，所述屏幕尺寸至少包括所述終端設備屏幕寬度的像素值與屏幕高度的像素值；

根據所述設計尺寸計算得到所述數據展示頁面的設計寬高比，并根據所述屏幕尺寸計算得到所述終端設備的屏幕寬高比；

對所述設計寬高比與所述屏幕寬高比進行比較得到比較結果，基于所述比較結果對所述數據展示頁面進行設置得到響應于所述終端設備屏幕尺寸的響應式數據展示頁面。

進一步地，所述對所述設計寬高比與所述屏幕寬高比進行比較得到比較結果，基于所述比較結果對所述數據展示頁面進行設置得到響應于所述終端設備屏幕尺寸的響應式數據展示頁面，包括：

比較所述設計寬高比與所述屏幕寬高比，

若所述設計寬高比等于所述屏幕寬高比，則所述數據展示頁面在所述終端設備上打開時不設置滾動條；