[發明專利]瀏覽器自動適配的網頁布局方法和裝置

在審

• 申請號: 201910073374.9
• 申請日: 2019-01-25
• 公開（公告）號: CN109783101A
• 公開（公告）日: 2019-05-21
• 發明（設計）人: 倪連柱
• 申請（專利權）人: 北京字節跳動網絡技術有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 北京竹辰知識產權代理事務所(普通合伙) 11706
• 代理人: 陳龍

本公開公開了一種瀏覽器自動適配的網頁布局方法、裝置、電子設備和計算機可讀存儲介質。其中該瀏覽器自動適配的網頁布局方法包括：根據第一網頁設計模型，以第一度量為單位生成網頁布局的第一樣式編碼；設置網頁布局的基礎屬性；根據所述基礎屬性，計算第一度量與第二度量的關聯關系；根據所述關聯關系，將所述第一樣式編碼轉換為以第二度量為單位的網頁布局的第二樣式編碼。本公開實施例通過采取瀏覽器自動適配的網頁布局方案，解決了現有技術中為了適應不同瀏覽器，網頁元素布局復雜繁瑣的技術問題，實現一套網頁布局代碼適配所有瀏覽器和終端的技術效果。

技術領域

本公開涉及計算機瀏覽器領域，尤其涉及一種瀏覽器自動適配的網頁布局方法、裝置、電子設備及計算機可讀存儲介質。

背景技術

瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和制作中，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。

因為不同瀏覽器使用內核及所支持的HTML(標準通用標記語言下的一個應用)等網頁語言標準不同；以及用戶客戶端的環境不同(如分辨率不同)造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素大小不同，位置混亂，錯位。

現有技術中依然無法做到網頁在任何瀏覽器上都能正常顯示，也就是兼容所有瀏覽器。雖然CSS作為層疊式計算機語言，專門用來表現HTML或XML，其被廣泛用于網頁的開發與布局，可以配合各種腳本語言動態地對網頁各種元素進行格式化。但采用CSS規范技術設計布局網頁，對于不同的瀏覽器，顯示元素時，依然需要人工復雜的計算以適應不同尺寸的瀏覽器。在進行網頁元素布局時，需要計算根字體尺寸，以及各網頁元素的實際尺寸為多少rem(font size of the root element，是指相對于根元素的字體大小的單位)，比較繁瑣。因此，希望提供一套網頁布局代碼來適配所有瀏覽器和終端。

發明內容

第一方面，本公開實施例提供一種瀏覽器自動適配的網頁布局方法，包括：根據第一網頁設計模型，以第一度量為單位生成網頁布局的第一樣式編碼；設置網頁布局的基礎屬性；根據所述基礎屬性，計算第一度量與第二度量的關聯關系；根據所述關聯關系，將所述第一樣式編碼轉換為以第二度量為單位的網頁布局的第二樣式編碼。

進一步，所述第一樣式編碼能夠直接被瀏覽器加載，顯示相應的布局效果。

進一步，所述第一網頁設計模型為盒子模型。

進一步，所述盒子模型包括距離、高度和寬度中的一個或多個屬性。

進一步，在所述第一樣式編碼中，以給定語法形式對不需要進行編碼轉換的樣式進行編碼。

進一步，方法還包括：設置網頁根元素的屬性；以第二度量為單位動態改變所述根元素的屬性。

進一步，以第二度量為單位設置所述根元素屬性；限制所述根元素的屬性的最大值與最小值。

進一步，所述根元素的屬性包括網頁根字體的尺寸。

進一步，所述第一度量為像素px，所述第二度量為視口寬度vw。

第二方面，本公開實施例提供一種瀏覽器自動適配的網頁布局裝置，包括：編碼模塊，用于根據第一網頁設計模型，以第一度量為單位生成網頁布局的第一樣式編碼；設置模塊，用于設置網頁布局的基礎屬性；計算模塊，用于根據所述基礎屬性，計算第一度量與第二度量的關聯關系；轉換模塊，用于根據所述關聯關系，將所述第一樣式編碼轉換為以第二度量為單位的網頁布局的第二樣式編碼。

進一步，所述第一樣式編碼能夠直接被瀏覽器加載，顯示相應的布局效果。

進一步，所述第一網頁設計模型為盒子模型。