一種網(wǎng)頁(yè)適應(yīng)屏幕排版方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)頁(yè)排版技術(shù)領(lǐng)域，特別是涉及一種網(wǎng)頁(yè)適應(yīng)屏幕排版方法及裝置。
【背景技術(shù)】
[0002]隨著智能手機(jī)與平板電腦等移動(dòng)終端的普及和移動(dòng)網(wǎng)絡(luò)技術(shù)的快速發(fā)展，使用移動(dòng)終端上網(wǎng)已成為人們生活的常態(tài)。但目前網(wǎng)站的網(wǎng)頁(yè)主要針對(duì)電腦屏幕進(jìn)行設(shè)計(jì)，當(dāng)用戶(hù)使用移動(dòng)終端瀏覽網(wǎng)站時(shí)，由于移動(dòng)終端屏幕尺寸的限制，網(wǎng)頁(yè)顯示常常出現(xiàn)變形、雜舌L、內(nèi)容丟失等情況，極大降低了用戶(hù)的瀏覽體驗(yàn)。
[0003]為使網(wǎng)頁(yè)在移動(dòng)終端上正常顯示，提高用戶(hù)的體驗(yàn)，瀏覽器通常將網(wǎng)頁(yè)的所有網(wǎng)頁(yè)元素進(jìn)行樣式修改后，按所有網(wǎng)頁(yè)元素不超過(guò)一個(gè)屏幕寬度的標(biāo)準(zhǔn)將內(nèi)容組織成數(shù)據(jù)流進(jìn)行排版，然而這種方法僅對(duì)圖片和文字有較好的展現(xiàn)，網(wǎng)頁(yè)原有的布局和樣式則被完全破壞，失去了原有網(wǎng)頁(yè)的排版特性。

【發(fā)明內(nèi)容】

[0004]本申請(qǐng)實(shí)施例中提供了一種網(wǎng)頁(yè)適應(yīng)屏幕排版方法及裝置，以解決相關(guān)網(wǎng)頁(yè)排版技術(shù)不能保留原網(wǎng)頁(yè)布局和樣式的問(wèn)題。
[0005]為了解決上述技術(shù)問(wèn)題，本申請(qǐng)實(shí)施例公開(kāi)了如下技術(shù)方案:
[0006]根據(jù)本申請(qǐng)實(shí)施例的第一方面，提供一種網(wǎng)頁(yè)適應(yīng)屏幕排版方法，包括:
[0007]計(jì)算網(wǎng)頁(yè)排版樹(shù)中各個(gè)節(jié)點(diǎn)的寬度；
[0008]判斷各個(gè)節(jié)點(diǎn)的寬度是否小于或等于屏幕寬度；以及
[0009]如果節(jié)點(diǎn)的寬度小于或等于屏幕寬度，則保留所述節(jié)點(diǎn)的原樣式，并對(duì)所述節(jié)點(diǎn)按標(biāo)準(zhǔn)流程排版，否則，修改所述節(jié)點(diǎn)的樣式，并對(duì)所述節(jié)點(diǎn)按適應(yīng)屏幕規(guī)則排版。
[0010]可選的，所述計(jì)算網(wǎng)頁(yè)排版樹(shù)中各個(gè)節(jié)點(diǎn)的寬度，包括:
[0011]遍歷網(wǎng)頁(yè)排版樹(shù)的節(jié)點(diǎn)；
[0012]判斷各個(gè)節(jié)點(diǎn)的層疊樣式表中是否設(shè)置了寬度值；
[0013]如果節(jié)點(diǎn)的層疊樣式表中設(shè)置了寬度值，以所述節(jié)點(diǎn)的層疊樣式表的寬度為節(jié)點(diǎn)的寬度；
[0014]如果節(jié)點(diǎn)的層疊樣式表中未設(shè)置寬度值，則查找所述節(jié)點(diǎn)的所有子節(jié)點(diǎn)，以寬度最大的子節(jié)點(diǎn)的寬度為所述節(jié)點(diǎn)的寬度，所述子節(jié)點(diǎn)的寬度為所述子節(jié)點(diǎn)的層疊樣式表的覽度;
[0015]如果節(jié)點(diǎn)的層疊樣式表中未設(shè)置寬度值，且所述節(jié)點(diǎn)的所有子節(jié)點(diǎn)中的層疊樣式表中未設(shè)置寬度值，則設(shè)置所述節(jié)點(diǎn)的寬度小于或等于屏幕的寬度。
[0016]可選的，所述修改節(jié)點(diǎn)的樣式，包括:
[0017]修改節(jié)點(diǎn)的層疊樣式表的寬度值和最大寬度值，使所述層疊樣式表的寬度值和最大寬度值小于屏幕寬度；
[0018]修改節(jié)點(diǎn)中層疊樣式表元素盒模型的填充屬性和邊距屬性的分辨率，使所述填充屬性和所述邊距屬性的分辨率分別小于或等于自身的預(yù)設(shè)值。
[0019]可選的，所述適應(yīng)屏幕規(guī)則排版，包括:
[0020]以修改節(jié)點(diǎn)的樣式后所述節(jié)點(diǎn)的元素內(nèi)容的高度為所述節(jié)點(diǎn)的排版高度，按所述節(jié)點(diǎn)的排版高度進(jìn)行排版；
[0021]動(dòng)態(tài)拉伸浮動(dòng)元素，所述動(dòng)態(tài)拉伸浮動(dòng)元素為:在一行中排版η個(gè)浮動(dòng)元素后，當(dāng)所述行的右方存在空白時(shí)，將所述浮動(dòng)元素的寬度值設(shè)置為所述浮動(dòng)元素的最小寬度值后，判斷所述行的右方的空白是否大于一個(gè)或多個(gè)所述浮動(dòng)元素的寬度，當(dāng)所述行的右方的空白大于一個(gè)或多個(gè)所述浮動(dòng)元素的寬度時(shí)，在所述行的右方的空白中加入一個(gè)或多個(gè)所述浮動(dòng)元素，其中，η為按標(biāo)準(zhǔn)流程排版時(shí)，一行中排版的所述浮動(dòng)元素的個(gè)數(shù)。
[0022]根據(jù)本申請(qǐng)實(shí)施例的第二方面，提供一種網(wǎng)頁(yè)適應(yīng)屏幕排版裝置，包括:
[0023]計(jì)算單元，用于計(jì)算網(wǎng)頁(yè)排版樹(shù)中各個(gè)節(jié)點(diǎn)的寬度；
[0024]第一判斷單元，用于判斷各個(gè)節(jié)點(diǎn)的寬度是否小于或等于屏幕寬度；
[0025]第一執(zhí)行單元，用于當(dāng)節(jié)點(diǎn)的寬度小于或等于屏幕寬度時(shí)，保留所述節(jié)點(diǎn)的原樣式，并對(duì)所述節(jié)點(diǎn)按標(biāo)準(zhǔn)流程排版；
[0026]第二執(zhí)行單元，用于當(dāng)節(jié)點(diǎn)的寬度大于屏幕寬度時(shí)，修改所述節(jié)點(diǎn)的樣式，并對(duì)所述節(jié)點(diǎn)按適應(yīng)屏幕規(guī)則排版。
[0027]可選的，所述計(jì)算單元，包括:
[0028]第一執(zhí)行子單元，用于遍歷網(wǎng)頁(yè)排版樹(shù)的節(jié)點(diǎn)；
[0029]第一判斷子單元，用于判斷各個(gè)節(jié)點(diǎn)的層疊樣式表中是否設(shè)置了寬度值；
[0030]第二執(zhí)行子單元，用于當(dāng)節(jié)點(diǎn)的層疊樣式表中設(shè)置了寬度值時(shí)，以所述節(jié)點(diǎn)的層疊樣式表的寬度為節(jié)點(diǎn)的寬度；
[0031]第三執(zhí)行子單元，用于當(dāng)節(jié)點(diǎn)的層疊樣式表中未設(shè)置寬度值時(shí)，查找所述節(jié)點(diǎn)的所有子節(jié)點(diǎn)；
[0032]第二判斷子單元，用于判斷所述節(jié)點(diǎn)的所有子節(jié)點(diǎn)的層疊樣式表中是否都未設(shè)置寬度值；
[0033]第四執(zhí)行子單元，用于當(dāng)所述節(jié)點(diǎn)的所有子節(jié)點(diǎn)的層疊樣式表中都未設(shè)置寬度值時(shí)，設(shè)置所述節(jié)點(diǎn)的寬度小于或等于屏幕的寬度；
[0034]第五執(zhí)行子單元，用于當(dāng)有所述節(jié)點(diǎn)的子節(jié)點(diǎn)的層疊樣式表中設(shè)置了寬度值時(shí)，以寬度最大的所述子節(jié)點(diǎn)的寬度為所述節(jié)點(diǎn)的寬度。
[0035]可選的，所述第二執(zhí)行單元包括:
[0036]樣式修改子單元，用于修改節(jié)點(diǎn)的樣式；
[0037]適應(yīng)屏幕規(guī)則排版子單元，用于對(duì)節(jié)點(diǎn)按適應(yīng)屏幕規(guī)則排版。
[0038]可選的，所述修改樣式子單元包括:
[0039]寬度修改子單元，用于修改節(jié)點(diǎn)的層疊樣式表的寬度值和最大寬度值，使所述層疊樣式表的寬度值和最大寬度值小于屏幕寬度；
[0040]邊距修改子單元，修改節(jié)點(diǎn)中層疊樣式表元素盒模型的填充屬性和邊距屬性的分辨率，使所述填充屬性和所述邊距屬性的分辨率分別小于或等于自身的預(yù)設(shè)值。
[0041]可選的，所述適應(yīng)屏幕規(guī)則排版子單元，包括:
[0042]高度排版子單元，用于以修改節(jié)點(diǎn)的樣式后所述節(jié)點(diǎn)的元素內(nèi)容的高度為所述節(jié)點(diǎn)的排版高度，按所述節(jié)點(diǎn)的排版高度進(jìn)行排版；
[0043]動(dòng)態(tài)拉伸子單元，用于動(dòng)態(tài)拉伸浮動(dòng)元素。
[0044]可選的，所述動(dòng)態(tài)拉伸子單元，包括:
[0045]第三判斷子單元，用于判斷一行排版η個(gè)浮動(dòng)元素后，所述行的右方是否存在空白；
[0046]第六執(zhí)行子單元，用于當(dāng)所述行的右方存在空白時(shí)，將所述浮動(dòng)元素的寬度值設(shè)置為所述浮動(dòng)元素的最小寬度值；
[0047]第四判斷子單元，用于當(dāng)所述行的右方存在空白時(shí)，將所述浮動(dòng)元素的寬度值設(shè)置為所述浮動(dòng)元素的最小寬度值后，判斷所述行的右方的空白是否大于一個(gè)或多個(gè)所述浮動(dòng)元素的寬度；
[0048]第七執(zhí)行子單元，用于當(dāng)所述行的右方的空白大于一個(gè)或多個(gè)所述浮動(dòng)元素的寬度時(shí)，在所述行的右方的空白中加入一個(gè)或多個(gè)所述浮動(dòng)元素，
[0049]其中，η為按標(biāo)準(zhǔn)流程排版時(shí)，一行中排版的所述浮動(dòng)元素的個(gè)數(shù)。
[0050]本申請(qǐng)實(shí)施例公開(kāi)的技術(shù)方案，計(jì)算排版樹(shù)每個(gè)節(jié)點(diǎn)的寬度，對(duì)節(jié)點(diǎn)的寬度大于智能終端屏幕的節(jié)點(diǎn)，限制所述節(jié)點(diǎn)的寬度，修改所述節(jié)點(diǎn)的樣式，并按適應(yīng)屏幕規(guī)則排版，使所述節(jié)點(diǎn)的顯示能夠適應(yīng)屏幕；對(duì)節(jié)點(diǎn)的寬度小于或等于智能終端屏幕的節(jié)點(diǎn)，不做樣式處理，并按標(biāo)準(zhǔn)流程排版，保留其原樣式。本申請(qǐng)實(shí)施例公開(kāi)的技術(shù)方案包括以下有益效果:
[0051]第一，在保證網(wǎng)頁(yè)頁(yè)面適應(yīng)屏幕的基礎(chǔ)上更多地保留頁(yè)面原來(lái)的布局和樣式，使頁(yè)面顯示有更好的效果和視覺(jué)體驗(yàn)；
[0052]第二，方案簡(jiǎn)單，且優(yōu)化了各種網(wǎng)頁(yè)頁(yè)面寫(xiě)法之間的兼容。本方案保留了大量頁(yè)面節(jié)點(diǎn)的原樣式，只對(duì)寬度大于屏幕的節(jié)點(diǎn)修改樣式并采用適應(yīng)屏幕規(guī)則排版，因而總體上不容易與標(biāo)準(zhǔn)流程沖突，降低了各種頁(yè)面寫(xiě)法之間因?yàn)殡y以兼容造成的問(wèn)題。
【附圖說(shuō)明】
[0053]為了更清楚地說(shuō)明本申請(qǐng)實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見(jiàn)地，對(duì)于本領(lǐng)域普通技術(shù)人員而言，在不付出創(chuàng)造性勞動(dòng)性的前提下，還可以根據(jù)這些附圖獲得其他的附圖。
[0054]圖1為本申請(qǐng)實(shí)施例提供的一種網(wǎng)頁(yè)適應(yīng)屏幕排版方法的流程示意圖；
[0055]圖2為圖1所示的方法中計(jì)算網(wǎng)頁(yè)排版樹(shù)中各個(gè)節(jié)點(diǎn)的寬度的流程示意圖；
[0056]圖3為本申請(qǐng)實(shí)施例提供的一種網(wǎng)頁(yè)適應(yīng)屏幕排版裝置的結(jié)構(gòu)示意圖；
[0057]圖4為圖3所示的裝置中計(jì)算單元的結(jié)構(gòu)示意圖；
[0058]圖5為圖3所示的裝置中第二執(zhí)行單元的結(jié)構(gòu)示意圖；
[0059]圖6為圖5所示的第二執(zhí)行單元中樣式修改子單元的結(jié)構(gòu)示意圖；
[0060]圖7為圖5所示的第二執(zhí)行單元中適應(yīng)屏幕規(guī)則排版子單元的結(jié)構(gòu)示意圖；
[0061]圖8為圖7所示適應(yīng)屏幕規(guī)則排版子單元中動(dòng)態(tài)拉伸子單元的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0062]為了使本技術(shù)領(lǐng)域的人員更好地理解本申請(qǐng)中的技術(shù)方案，下面將結(jié)合本申請(qǐng)實(shí)施例中的附圖，對(duì)本申請(qǐng)實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本申請(qǐng)一部分實(shí)施例，而不是全部的實(shí)施例。基于本申請(qǐng)中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都應(yīng)當(dāng)屬于本申請(qǐng)保護(hù)的范圍。
[0063]圖1是本申請(qǐng)實(shí)施例提供的一種網(wǎng)頁(yè)適應(yīng)屏幕排版方法的流程示意圖，如圖1所示，所述方法包括以下步驟。
[0064]在步驟SlOl中，計(jì)算網(wǎng)頁(yè)排版樹(shù)中各個(gè)節(jié)點(diǎn)的寬度；
[0065]在步驟S102中，判斷各個(gè)節(jié)點(diǎn)的寬度是否小于或等于屏幕寬度；
[0066]在步驟S103中，根據(jù)步驟S102的判斷結(jié)果，如果節(jié)點(diǎn)的寬度小于或等于屏幕寬度，則保留所述節(jié)點(diǎn)的原樣式，并對(duì)所述節(jié)點(diǎn)按標(biāo)準(zhǔn)流程排版；
[0067]在步驟S104中，根據(jù)步驟S102的判斷結(jié)果，如果節(jié)點(diǎn)的寬度不小于或等于屏幕寬度，則修改所述節(jié)點(diǎn)的樣式，并對(duì)所述節(jié)點(diǎn)按適應(yīng)屏幕規(guī)則排版。
[0