[發明專利]頁面適配方法、裝置、設備和存儲介質

在審

• 申請號: 201910314570.0
• 申請日: 2019-04-18
• 公開（公告）號: CN110147230A
• 公開（公告）日: 2019-08-20
• 發明（設計）人: 王海艷;賀青;王麗波;張耀
• 申請（專利權）人: 浙江數鏈科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 杭州華進聯浙知識產權代理有限公司 33250
• 代理人: 舒丁

本申請涉及一種頁面適配方法、裝置、設備和存儲介質。所述方法包括：獲取頁面設計文件，獲取用戶設備的設備像素比和屏幕分辨率，根據設備像素比確定用戶設備的頁面縮放比值，根據屏幕分辨率確定用戶設備的頁面布局基準值，按照頁面縮放比值和頁面布局基準值，生成頁面設計文件在用戶設備上對應的適配頁面。采用本方法能夠依據用戶設備屏幕的相關參數對用戶設備進行頁面適配，能夠靈活地適用于不同類型的終端屏幕。

技術領域

本申請涉及計算機技術領域，特別是涉及一種頁面適配方法、裝置、設備和存儲介質。

背景技術

近年來，手機、平板電腦等移動終端發展迅猛，用戶在使用移動終端時，除了考慮移動終端的硬件配置和功能之外，對移動終端的外觀設計和屏幕顯示效果也越來越注重。由于移動終端屏幕的尺寸和分辨率多樣化，開發出一套可以適用于不同屏幕尺寸、不同屏幕分辨率的頁面是一項極具挑戰性的任務。

通常可以采用百分比布局方案進行屏幕適配，按照屏幕尺寸設計對應的百分比縮放頁面和頁面元素。也可以采用媒體查詢在不同屏幕分辨率下加載不同的頁面布局樣式。然而，百分比布局方案的頁面顯示效果不佳。不同分辨率的屏幕下加載不同的頁面布局樣式的方案，無法覆蓋所有類型的終端屏幕。

發明內容

基于此，有必要針對上述技術問題，提供一種能夠適配于不同類型終端屏幕的的頁面適配方法、裝置、設備和存儲介質。

一種頁面適配方法，所述方法包括：

獲取頁面設計文件，獲取用戶設備的設備像素比和屏幕分辨率；

根據所述設備像素比確定所述用戶設備的頁面縮放比值；

根據所述屏幕分辨率確定所述用戶設備的頁面布局基準值；

按照所述頁面縮放比值和所述頁面布局基準值，生成所述頁面設計文件在所述用戶設備上對應的適配頁面。

在其中一個實施例中，所述獲取用戶設備的設備像素比和屏幕分辨率的步驟，包括：

獲取所述用戶設備的設備獨立像素和設備像素比；

依據所述設備獨立像素和所述設備像素比，計算所述屏幕分辨率。

在其中一個實施例中，所述根據所述設備像素比確定所述用戶設備的頁面縮放比值的步驟，包括：

根據所述設備像素比的反比例函數值確定所述頁面縮放比值。

在其中一個實施例中，所述生成所述頁面設計文件在所述用戶設備上對應的適配頁面的步驟，包括：

將所述適配頁面的元數據meta標簽中的縮放比值配置為所述頁面縮放比值，并將所述meta標簽中的布局寬度配置為所述用戶設備的屏幕寬度。

在其中一個實施例中，所述生成所述頁面設計文件在所述用戶設備上對應的適配頁面的步驟，包括：

當所述頁面設計文件上頁面元素的類型為圖像類型時，查詢在所述設備像素比下所述頁面元素對應的尺寸要求；

從預設的圖像庫中獲取圖像尺寸滿足所述尺寸要求的所述頁面元素，并將滿足所述尺寸要求的所述頁面元素加載至所述適配頁面。

在其中一個實施例中，所述生成所述頁面設計文件在所述用戶設備上對應的適配頁面的步驟，包括：

當所述頁面設計文件上頁面元素的類型為文字類型時，查詢所述頁面元素的字體大小在所述設備像素比下對應的網頁字體大小，按照所述網頁字體大小調整所述頁面元素在所述適配頁面上的字體大小。

在其中一個實施例中，所述生成所述頁面設計文件在所述用戶設備上對應的適配頁面的步驟，包括：