[發明專利]網頁適配方法、裝置和系統、設備

在審

• 申請號: 201811098946.0
• 申請日: 2018-09-20
• 公開（公告）號: CN110928542A
• 公開（公告）日: 2020-03-27
• 發明（設計）人: 謝基顏
• 申請（專利權）人: 北京國雙科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F16/957
• 代理公司: 北京集佳知識產權代理有限公司 11227
• 代理人: 巴翠昆;王寶筠

本發明公開了網頁適配方法、裝置和系統、設備，其中網頁適配方法，包括獲取網頁模板中編輯區域的區域比例和顯示屏幕的屏幕比例；在所述區域比例與所述屏幕比例不一致的情況下，調整所述網頁模板中編輯區域的坐標值，以使所述網頁模板中編輯區域于所述屏幕比例對應的虛擬網頁模板框架中完全且居中顯示；適配所述網頁模塊于所述顯示屏幕，以使所述編輯區域的坐標長度轉換后的像素長度與所述顯示屏幕的像素長度一致，或者，所述編輯區域的坐標寬度轉換后的像素寬度與所述顯示屏幕的像素寬度一致。本申請將固定比例網頁模板自動適配于不同屏幕比例的移動設備，最大限度地還原網頁編輯器所開發的網頁模板。

技術領域

本發明涉及終端技術領域，尤其涉及網頁適配方法、裝置和系統、設備。

背景技術

目前移動終端的機型繁雜，不同機型移動終端的顯示屏幕的屏幕比例不盡相同。移動終端安裝的瀏覽器可以顯示網頁(又稱H5頁面)，為了滿足不同屏幕比例的需求，通常會開發出多種主流屏幕比例的網頁模板，以適用于不同屏幕比例的移動終端。

由于主流屏幕比例較多所以需開發網頁的種類也較多，并且目前網頁開發過程中需要開發人員自己創建組件較為繁瑣，為了簡化網頁開發過程，衍生出網頁編輯器(又稱H5編輯器)。

在網頁編輯器上可以采用拖拽方式添加組件，比如一個音樂組件，可以直接拖拽到網頁上添加音樂列表，開發完成的網頁模板便具有音樂播放功能，從而簡單、方便地開發完成網頁模板。

但是，目前網頁編輯器只有一個固定比例的視窗，開發完成的網頁模板也為該固定比例。直接使用固定比例的網頁模板到不同屏幕比例的移動終端，會出現顯示屏幕中的網頁顯示不完整、網頁背景留白過多，網頁中組件長寬比例變形等不適配問題。

發明內容

鑒于上述問題，提出了本發明以便提供一種克服上述問題或者至少部分地解決上述問題的網頁適配方法、裝置和系統，以便將固定比例網頁模板自動適配于不同屏幕比例的移動設備，最大限度地還原網頁編輯器所開發的網頁模板。

為了實現上述目的，本申請提供了下述技術特征：

一種網頁適配方法，包括：

獲取網頁模板中編輯區域的區域比例和顯示屏幕的屏幕比例；

在對比所述區域比例和所述屏幕比例后確定所述顯示屏幕過寬的情況下，調整所述網頁模板中編輯區域的多個坐標值，以使所述網頁模板中編輯區域在虛擬網頁模板框架與所述屏幕比例對應的情況下完全顯示；

適配所述網頁模板于所述顯示屏幕。

一種網頁適配裝置，包括：

獲取比例單元，用于獲取網頁模板中編輯區域的區域比例和顯示屏幕的屏幕比例；

過寬調整單元，用于在對比所述區域比例和所述屏幕比例后確定所述顯示屏幕過寬的情況下，調整所述網頁模板中編輯區域的多個坐標值，以使所述網頁模板中編輯區域在虛擬網頁模板框架與所述屏幕比例對應的情況下完全顯示；

一種網頁適配系統，包括：

網頁編輯終端，用于生成網頁模板，獲取網頁模板的網頁標識并構建網頁模板和網頁標識的關聯關系，上傳網頁模板、網頁標識和關聯關系至服務器；

服務器，用于存儲網頁模板，網頁標識，以及網頁模板和網頁標識關聯關系；接收移動終端發送的網頁模板獲取指令，并反饋與網頁模板獲取指令中網頁標識關聯的網頁模板至移動終端；