本發(fā)明涉及網(wǎng)頁(yè)布局，具體涉及一種網(wǎng)頁(yè)布局兼容方法、裝置、設(shè)備及介質(zhì)。

背景技術(shù)：

1、隨著越來(lái)越多的屏幕尺寸出現(xiàn)在支持web的設(shè)備上，自適應(yīng)web設(shè)計(jì)的概念出現(xiàn)了，即允許網(wǎng)頁(yè)改變其布局和外觀以適應(yīng)不同的屏幕寬度、分辨率等的實(shí)踐。自適應(yīng)布局指的是同一頁(yè)面在不同屏幕尺寸下有不同的布局，以保證網(wǎng)頁(yè)在不同設(shè)備上都可以具有較好的顯示效果。

2、在現(xiàn)有技術(shù)中，進(jìn)行自適應(yīng)布局時(shí)，往往是通過獲取實(shí)際訪問設(shè)備的具體參數(shù)所處的具體區(qū)間提供對(duì)應(yīng)的網(wǎng)頁(yè)顯示尺寸，這樣的方式按照區(qū)間來(lái)實(shí)現(xiàn)適應(yīng)布局，無(wú)法做到與設(shè)計(jì)圖等比例還原，而且兼容各種設(shè)備工作量大，效率低下。

技術(shù)實(shí)現(xiàn)思路

1、有鑒于此，本發(fā)明提供了一種網(wǎng)頁(yè)布局兼容方法、裝置、設(shè)備及介質(zhì)，以解決網(wǎng)頁(yè)在進(jìn)行自適應(yīng)布局時(shí)，無(wú)法做到與設(shè)計(jì)圖等比例還原，以及兼容各種設(shè)備工作量大的問題。

2、第一方面，本發(fā)明提供了一種網(wǎng)頁(yè)布局兼容方法，所述方法包括：

3、響應(yīng)于目標(biāo)網(wǎng)頁(yè)被終端設(shè)備訪問時(shí)，獲取所述終端設(shè)備對(duì)應(yīng)的設(shè)備類型和網(wǎng)頁(yè)顯示寬度；

4、根據(jù)所述終端設(shè)備的設(shè)備類型，確定所述目標(biāo)網(wǎng)頁(yè)的設(shè)計(jì)寬度和根字體設(shè)計(jì)尺寸；

5、確定所述目標(biāo)網(wǎng)頁(yè)的設(shè)計(jì)寬度和所述網(wǎng)頁(yè)顯示寬度之間的比例關(guān)系，基于所述比例關(guān)系和所述根字體設(shè)計(jì)尺寸，確定所述目標(biāo)網(wǎng)頁(yè)相對(duì)于所述終端設(shè)備的第一根字體屬性值；

6、根據(jù)所述網(wǎng)頁(yè)顯示寬度確定所述目標(biāo)網(wǎng)頁(yè)在視口單位下的單位寬度尺寸值，基于所述單位寬度尺寸值對(duì)所述第一根字體屬性值進(jìn)行單位轉(zhuǎn)換，得到視口單位下的第二根字體屬性值，并將所述第二根字體屬性值確定為相對(duì)單位；

7、根據(jù)目標(biāo)網(wǎng)頁(yè)中各個(gè)元素相對(duì)于根字體的相對(duì)單位大小和所述第二根字體屬性值，控制所述終端設(shè)備顯示目標(biāo)網(wǎng)頁(yè)中的各個(gè)元素。

8、通過在網(wǎng)頁(yè)被訪問時(shí)，根據(jù)訪問網(wǎng)頁(yè)的終端設(shè)備對(duì)應(yīng)的設(shè)備類型來(lái)確定網(wǎng)頁(yè)的設(shè)計(jì)寬度和根字體設(shè)計(jì)尺寸，同時(shí)根據(jù)設(shè)計(jì)寬度和終端設(shè)備上網(wǎng)頁(yè)的顯示寬度之間的比例關(guān)系來(lái)確定目標(biāo)網(wǎng)頁(yè)在終端設(shè)備上的根字體屬性值，并將其在視口單位下的值作為相對(duì)單位，從而根據(jù)各個(gè)元素的相對(duì)單位大小來(lái)控制終端設(shè)備顯示目標(biāo)網(wǎng)頁(yè)中的各個(gè)元素，實(shí)現(xiàn)了目標(biāo)網(wǎng)頁(yè)對(duì)于不同屏幕大小的終端設(shè)備都可以兼容顯示，并且具有相對(duì)較好的顯示效果。

9、在一種可選的實(shí)施方式中，所述獲取所述終端設(shè)備的設(shè)備類型包括：

10、獲取所述終端設(shè)備的實(shí)際屏幕寬度；

11、根據(jù)所述實(shí)際屏幕寬度和預(yù)設(shè)臨界寬度的大小關(guān)系，確定所述終端設(shè)備的設(shè)備類型。

12、通過終端設(shè)備的實(shí)際屏幕寬度和預(yù)設(shè)臨界寬度之間的大小關(guān)系，可以準(zhǔn)確快捷地確定終端設(shè)備的設(shè)備類型。

13、在一種可選的實(shí)施方式中，所述設(shè)備類型包括：移動(dòng)終端設(shè)備和電腦設(shè)備；

14、所述根據(jù)所述終端設(shè)備的設(shè)備類型，確定所述目標(biāo)網(wǎng)頁(yè)的設(shè)計(jì)寬度和根字體設(shè)計(jì)尺寸包括：

15、當(dāng)所述終端設(shè)備為移動(dòng)終端設(shè)備時(shí)，調(diào)用所述目標(biāo)網(wǎng)頁(yè)的第一設(shè)計(jì)稿，所述第一設(shè)計(jì)稿為針對(duì)移動(dòng)終端設(shè)備預(yù)設(shè)的網(wǎng)頁(yè)設(shè)計(jì)稿，將所述第一設(shè)計(jì)稿的設(shè)計(jì)寬度和根字體設(shè)計(jì)尺寸確定為目標(biāo)網(wǎng)頁(yè)的設(shè)計(jì)寬度和根字體設(shè)計(jì)尺寸；

16、當(dāng)所述終端設(shè)備為電腦設(shè)備時(shí)，調(diào)用所述目標(biāo)網(wǎng)頁(yè)的第二設(shè)計(jì)稿，所述第二設(shè)計(jì)稿為針對(duì)電腦設(shè)備預(yù)設(shè)的網(wǎng)頁(yè)設(shè)計(jì)稿，將所述第二設(shè)計(jì)稿的設(shè)計(jì)寬度和根字體設(shè)計(jì)尺寸確定為目標(biāo)網(wǎng)頁(yè)的設(shè)計(jì)寬度和根字體設(shè)計(jì)尺寸。

17、通過預(yù)先設(shè)計(jì)好的針對(duì)不同類型終端設(shè)備的設(shè)計(jì)稿，從而在確定終端設(shè)備的設(shè)備類型后，調(diào)用對(duì)應(yīng)的設(shè)計(jì)稿，并進(jìn)行后續(xù)相應(yīng)的調(diào)整，保證最終目標(biāo)網(wǎng)頁(yè)的顯示效果更加契合訪問網(wǎng)頁(yè)的終端設(shè)備。

18、在一種可選的實(shí)施方式中，所述根據(jù)目標(biāo)網(wǎng)頁(yè)中各個(gè)元素相對(duì)于根字體的相對(duì)單位大小和所述第二根字體屬性值，控制所述終端設(shè)備顯示目標(biāo)網(wǎng)頁(yè)中的各個(gè)元素，包括：

19、當(dāng)所述終端設(shè)備為移動(dòng)終端設(shè)備時(shí)，根據(jù)所述第一設(shè)計(jì)稿中各個(gè)元素相對(duì)于根字體的相對(duì)單位大小和所述第二根字體屬性值，確定所述第一設(shè)計(jì)稿中各個(gè)元素在視口單位下的尺寸大??；

20、基于所述第一設(shè)計(jì)稿中各個(gè)元素在視口單位下的尺寸大小，控制所述終端設(shè)備顯示目標(biāo)網(wǎng)頁(yè)中的各個(gè)元素；

21、當(dāng)所述終端設(shè)備為電腦設(shè)備時(shí)，根據(jù)所述第二設(shè)計(jì)稿中各個(gè)元素相對(duì)于根字體的相對(duì)單位大小和所述第二根字體屬性值，確定所述第二設(shè)計(jì)稿中各個(gè)元素在視口單位下的尺寸大小；

22、基于所述第二設(shè)計(jì)稿中各個(gè)元素在視口單位下的尺寸大小，控制所述終端設(shè)備顯示目標(biāo)網(wǎng)頁(yè)中的各個(gè)元素。

23、通過不同設(shè)計(jì)稿中各個(gè)元素相對(duì)于根字體的相對(duì)單位大小和第二根字體屬性值，來(lái)得到各個(gè)元素在視口單位下的尺寸大小，從而根據(jù)視口單位下的尺寸大小來(lái)控制終端設(shè)備顯示元素，可以實(shí)現(xiàn)目標(biāo)網(wǎng)頁(yè)中的元素等比例縮放，保證顯示效果。

24、在一種可選的實(shí)施方式中，所述方法還包括：

25、根據(jù)所述網(wǎng)頁(yè)顯示寬度和預(yù)設(shè)區(qū)間的大小關(guān)系，確定所述目標(biāo)網(wǎng)頁(yè)中塊級(jí)元素中的字體大?。?/p>

26、根據(jù)所述目標(biāo)網(wǎng)頁(yè)中塊級(jí)元素中的字體大小顯示所述目標(biāo)網(wǎng)頁(yè)中塊級(jí)元素中的字體。

27、對(duì)于目標(biāo)網(wǎng)頁(yè)中的塊級(jí)元素中的字體，可以根據(jù)終端設(shè)備中網(wǎng)頁(yè)顯示寬度和預(yù)設(shè)區(qū)間的關(guān)系來(lái)確定對(duì)應(yīng)的字體大小，避免由于縮放導(dǎo)致塊級(jí)元素中的字體過大或過小，影響顯示效果。

28、在一種可選的實(shí)施方式中，所述方法還包括：

29、當(dāng)所述終端設(shè)備為移動(dòng)終端設(shè)備時(shí)，獲取所述移動(dòng)終端設(shè)備的設(shè)備像素比；

30、根據(jù)所述設(shè)備像素比，確定所述目標(biāo)網(wǎng)頁(yè)中像素尺寸為1的元素對(duì)應(yīng)的縮放比例；

31、基于所述縮放比例顯示所述目標(biāo)網(wǎng)頁(yè)中像素尺寸為1的元素。

32、通過在終端設(shè)備為移動(dòng)終端設(shè)備時(shí)，獲取其對(duì)應(yīng)的設(shè)備像素比，從而調(diào)整目標(biāo)網(wǎng)頁(yè)中像素尺寸為1的元素對(duì)應(yīng)的縮放比例，保證終端設(shè)備上像素尺寸為1的元素的顯示效果不會(huì)受到設(shè)備像素比的影響，具有更準(zhǔn)確的顯示效果。

33、在一種可選的實(shí)施方式中，所述方法還包括：

34、在所述終端設(shè)備中顯示目標(biāo)網(wǎng)頁(yè)中的各個(gè)元素時(shí)，若所述目標(biāo)網(wǎng)頁(yè)中存在待播放元素，自動(dòng)進(jìn)行播放，所述待播放元素為：視頻或音頻。

35、通過在顯示目標(biāo)網(wǎng)頁(yè)時(shí)，自動(dòng)播放網(wǎng)頁(yè)中的待播放元素，進(jìn)一步保證目標(biāo)網(wǎng)頁(yè)的顯示效果。

36、第二方面，本發(fā)明提供了一種網(wǎng)頁(yè)布局兼容裝置，所述裝置包括：

37、設(shè)備信息獲取模塊，用于響應(yīng)于目標(biāo)網(wǎng)頁(yè)被終端設(shè)備訪問時(shí)，獲取所述終端設(shè)備對(duì)應(yīng)的設(shè)備類型和網(wǎng)頁(yè)顯示寬度；

38、設(shè)計(jì)數(shù)據(jù)確定模塊，用于根據(jù)所述終端設(shè)備的設(shè)備類型，確定所述目標(biāo)網(wǎng)頁(yè)的設(shè)計(jì)寬度和根字體設(shè)計(jì)尺寸；

39、根字體屬性確定模塊，用于確定所述目標(biāo)網(wǎng)頁(yè)的設(shè)計(jì)寬度和所述網(wǎng)頁(yè)顯示寬度之間的比例關(guān)系，基于所述比例關(guān)系和所述根字體設(shè)計(jì)尺寸，確定所述目標(biāo)網(wǎng)頁(yè)相對(duì)于所述終端設(shè)備的第一根字體屬性值；

40、根字體單位轉(zhuǎn)換模塊，用于根據(jù)所述網(wǎng)頁(yè)顯示寬度確定所述目標(biāo)網(wǎng)頁(yè)在視口單位下的單位寬度尺寸值，基于所述單位寬度尺寸值對(duì)所述第一根字體屬性值進(jìn)行單位轉(zhuǎn)換，得到視口單位下的第二根字體屬性值，并將所述第二根字體屬性值確定為相對(duì)單位；

41、網(wǎng)頁(yè)元素顯示模塊，用于根據(jù)目標(biāo)網(wǎng)頁(yè)中各個(gè)元素相對(duì)于根字體的相對(duì)單位大小和所述第二根字體屬性值，控制所述終端設(shè)備顯示目標(biāo)網(wǎng)頁(yè)中的各個(gè)元素。

42、第三方面，本發(fā)明提供了一種計(jì)算機(jī)設(shè)備，包括：存儲(chǔ)器和處理器，存儲(chǔ)器和處理器之間互相通信連接，存儲(chǔ)器中存儲(chǔ)有計(jì)算機(jī)指令，處理器通過執(zhí)行計(jì)算機(jī)指令，從而執(zhí)行上述第一方面或其對(duì)應(yīng)的任一實(shí)施方式的網(wǎng)頁(yè)布局兼容方法。

43、第四方面，本發(fā)明提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，該計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)上存儲(chǔ)有計(jì)算機(jī)指令，計(jì)算機(jī)指令用于使計(jì)算機(jī)執(zhí)行上述第一方面或其對(duì)應(yīng)的任一實(shí)施方式的網(wǎng)頁(yè)布局兼容方法。