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

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

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