網(wǎng)頁顯示方法及裝置制造方法
【專利摘要】本申請實(shí)施例公開了一種網(wǎng)頁顯示方法及裝置。所述方法包括：獲取待顯示網(wǎng)頁的源代碼；解析所述源代碼形成樹狀節(jié)點(diǎn)；將所述樹狀節(jié)點(diǎn)進(jìn)行排版；根據(jù)排版后的樹狀節(jié)點(diǎn)定位主容器；定位所述主容器內(nèi)的至少一個次容器；調(diào)整所述次容器的面積；繪制調(diào)整后的次容器。本申請實(shí)施例還公開了一種網(wǎng)頁顯示裝置。本申請實(shí)施例所提供的網(wǎng)頁顯示方法及裝置，將待顯示網(wǎng)頁模塊化，當(dāng)對網(wǎng)頁的部分元素進(jìn)行調(diào)整時(shí)，不會破壞網(wǎng)頁的細(xì)節(jié)排版，而且各個次容器相互獨(dú)立，每個次容器的細(xì)節(jié)排版不受其他次容器的影響。由此可見，本申請實(shí)施例所提供的網(wǎng)頁顯示方法及裝置，不但能保證網(wǎng)頁的可讀性，也能夠保留網(wǎng)頁的細(xì)節(jié)排版，改善了用戶體驗(yàn)。
【專利說明】網(wǎng)頁顯示方法及裝置
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及移動通信【技術(shù)領(lǐng)域】，特別是涉及一種網(wǎng)頁顯示方法及裝置。
【背景技術(shù)】
[0002]用戶在使用便攜終端，如手機(jī)、PAD等，瀏覽網(wǎng)頁時(shí)，由于網(wǎng)頁依照臺式電腦的屏幕尺寸設(shè)計(jì)，而便攜終端的屏幕尺寸偏小，如果將原始網(wǎng)頁顯示在便攜移動終端屏幕上，則網(wǎng)頁的高度和寬度會超出便攜終端屏幕，當(dāng)用戶進(jìn)行瀏覽時(shí)，需要邊瀏覽邊調(diào)整網(wǎng)頁的內(nèi)容；如果將網(wǎng)頁直接完整的縮小至與便攜終端屏幕尺寸一致進(jìn)行顯示，則網(wǎng)頁內(nèi)容顯示過小，用戶無法清楚的瀏覽網(wǎng)頁內(nèi)容，嚴(yán)重影響用戶體驗(yàn)。
[0003]針對上述問題，目前在便攜終端中廣泛采用的網(wǎng)頁顯示方法為:通過放大部分內(nèi)容的字體，提高網(wǎng)頁在便攜終端上的可讀性。具體實(shí)現(xiàn)方法如下:對網(wǎng)頁內(nèi)容進(jìn)行排版時(shí)，保證網(wǎng)頁整體布局不變，對網(wǎng)頁重點(diǎn)內(nèi)容的文本進(jìn)行放大，使重點(diǎn)內(nèi)容的文字達(dá)到可閱讀的效果。當(dāng)用戶需要對部分內(nèi)容詳細(xì)閱讀時(shí)，再通過交互的方式對該部分文本內(nèi)容再次進(jìn)行放大。雖然該方法對文本進(jìn)行了優(yōu)化，而且能保證網(wǎng)頁整體布局的完整，但是文本的放大導(dǎo)致某些區(qū)域排版的變形和文字的溢出隱藏，對局部細(xì)節(jié)的排版產(chǎn)生了破壞。
[0004]因此，如何提供一種既能保證可讀性，又能保留網(wǎng)頁細(xì)節(jié)排版的網(wǎng)頁顯示方法，成為本領(lǐng)域亟待解決的問題。

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

[0005]本申請實(shí)施例提供了 一種網(wǎng)頁顯示方法及裝置，既能提高網(wǎng)頁在便攜終端上可讀性，又能夠保留網(wǎng)頁的細(xì)節(jié)排版，改善了用戶體驗(yàn)。
[0006]第一方面，本申請實(shí)施例公開了一種網(wǎng)頁顯示方法，所述方法包括:獲取待顯示網(wǎng)頁的源代碼；解析所述源代碼形成樹狀節(jié)點(diǎn)；將所述樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版；根據(jù)排版后的樹狀節(jié)點(diǎn)定位主容器；定位所述主容器內(nèi)的至少一個次容器，其中，每個所述次容器包含一部分所述待顯示網(wǎng)頁的元素；調(diào)整所述次容器的面積；繪制調(diào)整后的次容器，將所述次容器所包含的待顯示網(wǎng)頁的元素在屏幕上顯示。
[0007]在第一方面的第一種可能的實(shí)現(xiàn)方式中，所述根據(jù)排版后的樹狀節(jié)點(diǎn)定位主容器，包括:判斷當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為空或者其上級節(jié)點(diǎn)是否為主容器；當(dāng)所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為空或者為主容器時(shí)，判斷當(dāng)前節(jié)點(diǎn)的高度是否為固定值；當(dāng)所述當(dāng)前節(jié)點(diǎn)高度不是固定值時(shí)，如果上級節(jié)點(diǎn)為空，將當(dāng)前節(jié)點(diǎn)定位為主容器；如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器，當(dāng)所述當(dāng)前節(jié)點(diǎn)的寬度大于等于根節(jié)點(diǎn)寬度的50%，且大于等于其上級節(jié)點(diǎn)寬度的90%，將所述當(dāng)前節(jié)點(diǎn)定位為主容器。
[0008]結(jié)合第一方面或第一方面的第一種可能的實(shí)現(xiàn)方式，在第二種可能的實(shí)現(xiàn)方式中，所述定位所述主容器內(nèi)包含的至少一個次容器，包括:判斷所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為主容器；當(dāng)所述上級節(jié)點(diǎn)為主容器，如果所述當(dāng)前節(jié)點(diǎn)的寬度為其上級節(jié)點(diǎn)寬度的20%到80%，將所述當(dāng)前節(jié)點(diǎn)定位為次容器。[0009]結(jié)合第一方面或第一方面的第一種或第二種可能的實(shí)現(xiàn)方式,在第三種可能的實(shí)現(xiàn)方式中，所述調(diào)整所述次容器的面積，包括:計(jì)算每個所述次容器的面積，并得到所有次容器面積的平均值；比較每個所述次容器的面積與所述平均值的大??；若所述次容器的面積大于所述平均值，將所述次容器按預(yù)設(shè)比例系數(shù)k進(jìn)行放大，其中，所述k大于I ;同時(shí)，將其他次容器進(jìn)行相應(yīng)縮小，以保持次容器的總寬度不變。
[0010]結(jié)合第一方面或第一方面的第一種或第二種或第三種可能的實(shí)現(xiàn)方式，在第四種可能的實(shí)現(xiàn)方式中，所述方法還包括:接收切換命令；生成所述目標(biāo)次容器的縮放比例系數(shù)U ;將所述目標(biāo)次容器的面積進(jìn)行u倍調(diào)整，并對應(yīng)調(diào)整其他次容器的面積，以保持次容器的總寬度不變；繪制調(diào)整后的次容器，將所述次容器的元素在屏幕上進(jìn)行顯示。
[0011]結(jié)合第一方面或第一方面的第一種或第二種或第三種或第四種可能的實(shí)現(xiàn)方式，在第五種可能的實(shí)現(xiàn)方式中，所述生成所述目標(biāo)次容器的縮放比例系數(shù)，包括:比較所述屏幕的寬度與所述主容器的寬度，取二者之中的最小值；將所述最小值與所述預(yù)設(shè)比例系數(shù)k作乘法計(jì)算，乘法計(jì)算的結(jié)果除以所述目標(biāo)次容器的寬度，得到第一縮放系數(shù)Ul ;將所述主容器的高度值除以所述目標(biāo)次容器的高度值，得到第二縮放系數(shù)u2;將所述Ul和所述u2中的最小值確定為所述縮放比例系數(shù)U。
[0012]第二方面，本申請實(shí)施例還公開了一種網(wǎng)頁顯示裝置，所述裝置包括:獲取單元，用于獲取待顯示網(wǎng)頁的源代碼；解析單元，用于解析所述獲取單元獲取到的源代碼形成樹狀節(jié)點(diǎn)；排版單元，用于將所述解析單元解析形成的樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版；第一定位單元，用于根據(jù)所述排版單元排版后的樹狀節(jié)點(diǎn)定位主容器;第二定位單元，用于定位所述主容器內(nèi)的至少一個次容器，其中，每個所述次容器包含一部分所述待顯示網(wǎng)頁的元素；第一調(diào)整單元，用于調(diào)整所述第二定位單元定位得到次容器的面積；繪制單元，用于繪制所述第一調(diào)整單元調(diào)整后的次容器，將所述次容器所包含的待顯示網(wǎng)頁的元素在屏幕上顯示。
[0013]在第二方面的第一種可能的實(shí)現(xiàn)方式中，所述第一定位單元包括:第一判斷單元和第二判斷單元，其中，所述第一判斷單元，用于判斷當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為空或者其上級節(jié)點(diǎn)是否為主容器；所述第二判斷單元，用于當(dāng)所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為空或者為主容器時(shí)，判斷當(dāng)前節(jié)點(diǎn)的高度是否為固定值；所述第一定位單元，具體用于當(dāng)所述當(dāng)前節(jié)點(diǎn)高度不是固定值時(shí)，如果上級節(jié)點(diǎn)為空，將當(dāng)前節(jié)點(diǎn)定位為主容器；如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器，當(dāng)所述當(dāng)前節(jié)點(diǎn)的寬度大于等于根節(jié)點(diǎn)寬度的50%，且大于等于其上級節(jié)點(diǎn)寬度的90%，將所述當(dāng)前節(jié)點(diǎn)定位為主容器。
[0014]結(jié)合第二方面或第二方面的第一種可能的實(shí)現(xiàn)方式，在第二種可能的實(shí)現(xiàn)方式中，所述第二定位單元包括:第三判斷單元，其中，所述第三判斷單元，用于判斷所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為主容器；所述第二定位單元，具體用于當(dāng)所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器時(shí)，如果所述當(dāng)前節(jié)點(diǎn)的寬度為其上級節(jié)點(diǎn)寬度的20%到80%，將所述當(dāng)前節(jié)點(diǎn)定位為次容器。
[0015]結(jié)合第二方面或第二方面的第一種或第二種可能的實(shí)現(xiàn)方式，在第三種可能的實(shí)現(xiàn)方式中，所述第一調(diào)整單元包括:第一計(jì)算單元、第一比較單元和縮放單元，其中，所述第一計(jì)算單元，用于將計(jì)算每個所述次容器的面積，并得到所有次容器面積的平均值；所述第一比較單元，用于比較所述第一計(jì)算單元計(jì)算得到的每個所述次容器的面積與所述平均值的大??；所述縮放單元，用于若所述次容器的面積大于所述平均值，將所述次容器按預(yù)設(shè)比例系數(shù)k進(jìn)行放大，其中，所述k大于I ;同時(shí)，將其他次容器進(jìn)行相應(yīng)縮小，以保持次容器的總寬度不變。
[0016]結(jié)合第二方面或第二方面的第一種或第二種或第三種可能的實(shí)現(xiàn)方式，在第四種可能的實(shí)現(xiàn)方式中，所述裝置還包括:接收單元、生成單元和第二調(diào)整單元，其中，所述接收單元，用于接收切換命令；所述生成單元，用于生成所述目標(biāo)次容器的縮放比例系數(shù)u ;所述第二調(diào)整單元，用于當(dāng)所述生成單元生成縮放比例系數(shù)u后，將所述目標(biāo)次容器的面積進(jìn)行U倍調(diào)整，并對應(yīng)調(diào)整其他次容器的面積，以保持次容器的總寬度不變；所述繪制單元，還用于繪制所述第二調(diào)整單元調(diào)整后的次容器，將所述次容器的元素在屏幕上進(jìn)行顯
/Jn ο
[0017]結(jié)合第二方面或第二方面的第一種或第二種或第三種或第四種可能的實(shí)現(xiàn)方式，在第五種可能的實(shí)現(xiàn)方式中，所述生成單元包括:第二比較單元、第二計(jì)算單元和確定單元，其中，所述第二比較單元，用于比較所述屏幕的寬度與所述主容器的寬度，取二者之中的最小值；所述第二計(jì)算單元，具體用于將所述最小值與所述預(yù)設(shè)比例系數(shù)k作乘法計(jì)算，乘法計(jì)算的結(jié)果除以所述目標(biāo)次容器的寬度，得到第一縮放系數(shù)Ul ;將所述主容器的高度值除以所述目標(biāo)次容器的高度值，得到第二縮放系數(shù)u2;所述確定單元，用于將所述第二計(jì)算單元計(jì)算得到的Ul和u2中的最小值確定為所述縮放比例系數(shù)U。
[0018]由上述技術(shù)方案可知，本申請實(shí)施例所提供的網(wǎng)頁顯示方法及裝置，通過將待顯示網(wǎng)頁源代碼解析形成樹狀節(jié)點(diǎn)，并定位所述樹狀節(jié)點(diǎn)的主容器及次容器，其中，每個所述次容器包含一部分待顯示網(wǎng)頁的元素。然后調(diào)整每個所述次容器的面積，并繪制調(diào)整后的次容器，所述次容器包含的待顯示網(wǎng)頁的元素在屏幕上顯示。與現(xiàn)有技術(shù)相比，本申請實(shí)施例通過將所述待顯示網(wǎng)頁模塊化，當(dāng)對網(wǎng)頁的部分元素進(jìn)行調(diào)整時(shí)，實(shí)質(zhì)上所調(diào)整的對象是包含該部分元素的次容器，因此，該部分元素的放大不會破壞該次容器的細(xì)節(jié)排版。同時(shí)，由于各個次容器是相互獨(dú)立的模塊，因此，對某一次容器的面積進(jìn)行調(diào)整時(shí)，其他次容器的排版不會受到任何影響。由此可見，本申請實(shí)施例所提供的網(wǎng)頁顯示方法及裝置，不但能保證網(wǎng)頁的可讀性，在此基礎(chǔ)上也能夠保留網(wǎng)頁的細(xì)節(jié)排版，改善了用戶體驗(yàn)。
【專利附圖】

【附圖說明】
[0019]為了更清楚地說明本申請實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，對于本領(lǐng)域普通技術(shù)人員而言，在不付出創(chuàng)造性勞動性的前提下，還可以根據(jù)這些附圖獲得其它的附圖。
[0020]圖1為本申請實(shí)施例所提供的網(wǎng)頁顯示方法流程圖；
[0021]圖2為本申請實(shí)施例所提供的網(wǎng)頁顯示方法的第二種實(shí)施方式流程圖；
[0022]圖3為本申請實(shí)施例所提供的網(wǎng)頁顯示方法的第三種實(shí)施方式流程圖；
[0023]圖4為本申請實(shí)施例所提供的網(wǎng)頁顯示裝置結(jié)構(gòu)示意圖；
[0024]圖5為本申請實(shí)施例所提供的網(wǎng)頁顯示裝置的第二種實(shí)施方式結(jié)構(gòu)示意圖；
[0025]圖6為本申請實(shí)施例所提供的網(wǎng)頁顯示裝置的第三種實(shí)施方式結(jié)構(gòu)示意圖。
【具體實(shí)施方式】[0026]為了使本領(lǐng)域技術(shù)人員更好地理解本申請實(shí)施例中的技術(shù)方案，并使本申請實(shí)施例的上述目的、特征和優(yōu)點(diǎn)能夠更加明顯易懂，下面結(jié)合附圖對本申請實(shí)施例中技術(shù)方案作進(jìn)一步詳細(xì)的說明。
[0027]參見圖1，圖1為本申請實(shí)施例所提供的網(wǎng)頁顯示方法流程圖。
[0028]所述方法包括:
[0029]步驟101:獲取待顯示網(wǎng)頁的源代碼。
[0030]所述待顯示網(wǎng)頁是指用戶在便攜終端上觸發(fā)后即將顯示的網(wǎng)頁，可以為任意網(wǎng)頁頁面，例如，網(wǎng)易、搜狐或者百度等。所述源代碼是一種計(jì)算機(jī)描述語言，通過匯編的方式將待顯示網(wǎng)頁的圖片，視頻，音樂，文字等元素進(jìn)行組織排版，通過瀏覽器翻譯后以網(wǎng)頁的形式展現(xiàn)出來。源代碼可以通過超文本標(biāo)記語言(HTML, Hypertext Markup Language)進(jìn)行編寫。
[0031]步驟102:解析所述源代碼形成樹狀節(jié)點(diǎn)。
[0032]現(xiàn)有網(wǎng)頁一般通過HTML語言編寫，現(xiàn)有網(wǎng)頁的內(nèi)容所遵循的為HTML規(guī)范或WAP規(guī)范，為了使所述待顯示網(wǎng)頁源代碼的結(jié)構(gòu)更清晰，從而可以更容易將所述待顯示網(wǎng)頁按照網(wǎng)頁元素模塊化，需要解析所述待顯示網(wǎng)頁的源代碼，識別出其中的樹狀節(jié)點(diǎn)。
[0033]其中，所述樹狀節(jié)點(diǎn)可以為任意已知或者即將出現(xiàn)的樹狀節(jié)點(diǎn)，例如，在本申請的一個優(yōu)選實(shí)例中，將網(wǎng)頁按照文件對象模型(DOM,Document Object Model)規(guī)范,將描述所述待顯示網(wǎng)頁的源代碼進(jìn)行解析，并識別出DOM節(jié)點(diǎn)。當(dāng)然，上述僅為本申請所提供的一個示例，本申請不限于此。
[0034]步驟103:將所述樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版。
[0035]樹狀節(jié)點(diǎn)是將所述待顯示網(wǎng)頁的頁面映射為一個由層次節(jié)點(diǎn)組成的文件，其中節(jié)點(diǎn)分幾個等級，每個等級的節(jié)點(diǎn)包含一定的網(wǎng)頁元素，但是為了準(zhǔn)確的展現(xiàn)出所述待顯示網(wǎng)頁的排版結(jié)構(gòu)，以便于將所述待顯示網(wǎng)頁的內(nèi)容模塊化，將所述樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版。
[0036]需要指出的，所述將所述樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版可以是，將樹狀節(jié)點(diǎn)按照級聯(lián)樣式表(CSS, Cascading Style Sheets)或者HTML樣式進(jìn)行排版，當(dāng)然，也可以按照其他的標(biāo)準(zhǔn)進(jìn)行排版，本申請對此不做限制。
[0037]此外，將所述樹狀節(jié)點(diǎn)進(jìn)行排版的操作為本領(lǐng)域技術(shù)人員所熟知的技術(shù)，本申請?jiān)诖瞬辉儋樖觥?br> [0038]步驟104:根據(jù)排版后的樹狀節(jié)點(diǎn)定位主容器。
[0039]主容器是指網(wǎng)頁中包含有多個小模塊的模塊，例如，一個網(wǎng)頁的整個頁面可以視為一個主容器。在樹狀節(jié)點(diǎn)中，可以將包含多個次級節(jié)點(diǎn)的節(jié)點(diǎn)定位為主容器。
[0040]其中，本申請實(shí)施例所提供的網(wǎng)頁顯示方法，通過節(jié)點(diǎn)排版后的寬度定位該節(jié)點(diǎn)是否為主容器，所述節(jié)點(diǎn)寬度指該樹狀節(jié)點(diǎn)按原比例顯示在像素設(shè)備時(shí)，其橫向所占的像素?cái)?shù)，本申請中以節(jié)點(diǎn)中所包含的網(wǎng)頁元素的量進(jìn)行確定。
[0041]步驟105:定位所述主容器內(nèi)的至少一個次容器。
[0042]需要指出的，每個主容器內(nèi)包含一個或多個次容器，其中，主容器內(nèi)所包含的次容器的數(shù)量根據(jù)待顯示網(wǎng)頁的結(jié)構(gòu)確定。例如，百度搜索的主頁頁面結(jié)構(gòu)相對簡單，因此可以定位為一個次容器；360瀏覽器首頁，可以將360瀏覽器首頁的頁面視為主容器，定位時(shí)將根節(jié)點(diǎn)定位為主容器，將頁面右側(cè)部分視為一個模塊，左側(cè)部分視為一個模塊，則在對節(jié)點(diǎn)定位時(shí)，該主容器包含兩個次容器。此外，當(dāng)主容器內(nèi)包含多個次容器時(shí)，次容器之間相互獨(dú)立，調(diào)整任意次容器時(shí)，不影響其他次容器內(nèi)元素的布局。
[0043]一般的，可以將網(wǎng)頁的組成元素分為兩大類，主體元素和用于定位的輔助元素。其中主體元素如文字、圖片、有背景或有邊框的區(qū)塊、表單、輸入框和其他可視元素等。用于定位的輔助元素，如不可見的區(qū)塊(如HTML標(biāo)簽<div>在默認(rèn)樣式下的表現(xiàn))。在對樹狀節(jié)點(diǎn)進(jìn)行定位時(shí)，一個包含有大段內(nèi)容的輔助元素可以定位為主容器，其他的輔助元素可以定位為該主容器內(nèi)的次容器，主元素填充在每個次容器內(nèi)。
[0044]步驟106:調(diào)整所述次容器的面積。
[0045]將次容器按照重要性計(jì)算縮放比例系數(shù)，并按照計(jì)算得到的縮放比例系數(shù)分別調(diào)整每個次容器的面積，放大重要性高的次容器的面積，縮小重要性低的次容器的面積，其中，放大的程度以在便攜終端上清楚的顯示為準(zhǔn)。所述清楚的顯示指，待顯示網(wǎng)頁在便攜終端顯示后，用戶無需進(jìn)行任何操作便可以清楚的瀏覽該放大的次容器的內(nèi)容。此外，所述次容器的重要性，可以根據(jù)網(wǎng)頁元素被瀏覽的頻率來判定，如果該網(wǎng)頁元素為用戶瀏覽該網(wǎng)頁是經(jīng)常瀏覽的部分，則該網(wǎng)頁元素的重要性高。因此，在定位次容器時(shí)，可以將包含被瀏覽頻率較高的網(wǎng)頁元素的部分定位為面積較大的次容器，通過次容器的面積來判定次容器的重要性。
[0046]需要指出的，調(diào)整次容器的面積是指，將次容器的寬和高進(jìn)行等比縮放。將次容器進(jìn)行縮放時(shí)，次容器內(nèi)所包含的網(wǎng)頁元素也會相應(yīng)的放大或縮小。其中，對次容器的面積進(jìn)行調(diào)整時(shí)，調(diào)整后與調(diào)整前相比，次容器的總寬度保持不變。
[0047]步驟107:繪制調(diào)整后的次容器，將所述次容器所包含的待顯示網(wǎng)頁的元素在屏
_卜.、…/Jn ο
[0048]本實(shí)施例所提供的網(wǎng)頁顯示方法，通過將待顯示網(wǎng)頁源代碼解析形成樹狀節(jié)點(diǎn)，并定位所述樹狀節(jié)點(diǎn)的主容器及次容器，其中，每個所述次容器包含一部分待顯示網(wǎng)頁的元素。然后調(diào)整每個所述次容器的面積，并繪制調(diào)整后的次容器，所述次容器包含的待顯示網(wǎng)頁的元素在屏幕上顯示。與現(xiàn)有技術(shù)相比，本申請實(shí)施例通過將所述待顯示網(wǎng)頁模塊化，當(dāng)對網(wǎng)頁的部分元素進(jìn)行調(diào)整時(shí)，實(shí)質(zhì)上所調(diào)整的對象是包含該部分元素的次容器，因此，該部分元素的放大不會破壞該次容器的細(xì)節(jié)排版。同時(shí)，由于各個次容器是相互獨(dú)立的模塊，因此，對某一次容器的面積進(jìn)行調(diào)整時(shí)，其他次容器的排版不會受到任何影響。由此可見，本申請實(shí)施例所提供的網(wǎng)頁顯示方法及裝置，不但能保證網(wǎng)頁的可讀性，在此基礎(chǔ)上也能夠保留網(wǎng)頁的細(xì)節(jié)排版，改善了用戶體驗(yàn)。
[0049]為了使本領(lǐng)域技術(shù)人員更加清楚的理解本申請的技術(shù)方案，在上述實(shí)施例的基礎(chǔ)上，本申請還提供了網(wǎng)頁顯示方法的第二種實(shí)施方式流程圖。
[0050]參見圖2， 圖2為本申請實(shí)施例所提供的網(wǎng)頁顯示方法的第二種實(shí)施方式流程圖。
[0051]所述方法包括:
[0052]步驟201:獲取待顯示網(wǎng)頁的源代碼。
[0053]步驟202:解析所述源代碼形成樹狀節(jié)點(diǎn)。
[0054]步驟203:將所述樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版。
[0055]步驟204:判斷當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為空或者為主容器，如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為空，執(zhí)行步驟206 ;如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器，執(zhí)行步驟205。
[0056]所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為空，即，所述當(dāng)前節(jié)點(diǎn)為根節(jié)點(diǎn)。
[0057]步驟205:判斷所述當(dāng)前節(jié)點(diǎn)的寬度是否大于等于根節(jié)點(diǎn)寬度的50%，且是否大于等于其上級節(jié)點(diǎn)寬度的90%，如果是，執(zhí)行步驟206，如果否，不執(zhí)行任何操作。
[0058]當(dāng)所述當(dāng)前節(jié)點(diǎn)的寬度大于等于其上級節(jié)點(diǎn)寬度的90%，說明所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)僅僅是定位的輔助元素，其內(nèi)部所包含的網(wǎng)頁元素全部包含于當(dāng)前節(jié)點(diǎn)所定位的容器中。
[0059]步驟206:判斷當(dāng)前節(jié)點(diǎn)的高度是否為固定值。如果當(dāng)前節(jié)點(diǎn)的高度為固定值，對當(dāng)前節(jié)點(diǎn)不執(zhí)行任何操作；如果當(dāng)前節(jié)點(diǎn)的不是固定值，執(zhí)行步驟207。
[0060]判斷當(dāng)前節(jié)點(diǎn)高度是否為固定值，可以包括:判斷當(dāng)前節(jié)點(diǎn)對應(yīng)的源代碼是否將所述當(dāng)前節(jié)點(diǎn)的高度值設(shè)置為固定值，如果將當(dāng)前節(jié)點(diǎn)的高度值設(shè)置為固定值，則當(dāng)前節(jié)點(diǎn)高度是固定值，否則，當(dāng)前節(jié)點(diǎn)的高度可能不是固定值；還需要判斷當(dāng)前節(jié)點(diǎn)對應(yīng)的背景圖像是否支持可變高度，如果當(dāng)前節(jié)點(diǎn)的背景圖高度不可變，例如是repeat-x或者no-repeat的圖像,貝U當(dāng)前節(jié)點(diǎn)的高度是固定值，否則，當(dāng)前節(jié)點(diǎn)的高度可能不是固定值。
[0061]需要指出的，上述判斷僅僅是本申請?zhí)峁┑氖纠?，本申請?jiān)谂袛喈?dāng)前節(jié)點(diǎn)是否可變時(shí)，還包括通過其他因素進(jìn)行判斷，本申請對此不做限制。
[0062]由于將次容器的寬度調(diào)整至與便攜終端的屏幕寬度相一致時(shí)，為了保證次容器中網(wǎng)頁元素的合理排版，次容器的高度肯定會產(chǎn)生變化，因此，需要包含所述次容器的主容器支持可變高度。
[0063]步驟207:將所述當(dāng)前節(jié)點(diǎn)定位為主容器。
[0064]步驟208:判斷所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為主容器。如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)非主容器，不執(zhí)行任何操作；如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器，執(zhí)行步驟209。
[0065]次容器嵌套在主容器內(nèi)，多個次容器相互獨(dú)立，因此，按照樹狀節(jié)點(diǎn)的層級式結(jié)構(gòu)特點(diǎn)，次容器節(jié)點(diǎn)的上級節(jié)點(diǎn)一定為主容器。
[0066]步驟209:判斷所述當(dāng)前節(jié)點(diǎn)的寬度是否為其上級節(jié)點(diǎn)寬度的20%到80%。如果是，執(zhí)行步驟210 ;如果否，不執(zhí)行任何操作。
[0067]由于每個主容器所包含的次容器至少為一個，當(dāng)主容器內(nèi)包含一個次容器時(shí)，所述次容器的寬度為所述主容器寬度的80% ;當(dāng)所述主容器包含多個次容器時(shí)，每個所述次容器寬度占所述主容器寬度的比例小于80% ;如果次容器的寬度占其所在主容器寬度的20%以下，則該次容器區(qū)域過小，基于本申請所要解決的技術(shù)問題，沒有任何意義。所以，次容器的寬度占主容器寬度的20%到80%。
[0068]步驟210:將所述當(dāng)前節(jié)點(diǎn)定位為次容器。
[0069]步驟211:計(jì)算每個所述次容器的面積，并得到所有次容器面積的平均值。
[0070]由上述實(shí)施例可知，次容器的面積表示該次容器所包含的網(wǎng)頁元素的重要性，次容器面積越大表示該次容器所包含的元素重要性越高。
[0071]需要指出的，當(dāng)主容器內(nèi)包含至少兩個次容器時(shí)，需要根據(jù)次容器的重要性計(jì)算每個次容器的面積，計(jì)算方法可以為:計(jì)算該次容器的寬度與高度的乘積，將所述乘積結(jié)果作為該次容器的面積值；或者，計(jì)算所述次容器中每一種類別元素的面積值，并將所有面積值相加得到該次容器的面積，其中，所述元素類別包括文字、圖片、動畫視頻和控件等，根據(jù)各類元素的重要程度，每類元素都被預(yù)設(shè)一個加權(quán)參數(shù)，所述元素的面積是根據(jù)所述元素所占的物理面積乘以所述元素的加權(quán)參數(shù)計(jì)算得到；當(dāng)主容器內(nèi)僅包含一個次容器時(shí)，無需比較次容器之間的重要性，將所述待顯示網(wǎng)頁直接顯示即可。
[0072]步驟212:比較每個所述次容器的面積與所述平均值的大小。
[0073]步驟213:若所述次容器的面積大于所述平均值，將所述次容器按預(yù)設(shè)比例系數(shù)k進(jìn)行放大，其中，所述k大于1 ;同時(shí)，將其他次容器進(jìn)行相應(yīng)縮小，以保持次容器的總寬度不變。
[0074]其中，預(yù)設(shè)比例系數(shù)k可以根據(jù)不同的網(wǎng)頁排版及次容器的數(shù)量和大小計(jì)算得到；或者計(jì)算得到每個次容器的比例系數(shù)。為了保證次容器的總寬度不變，將重要性較高的次容器按照其自身的預(yù)設(shè)比例系數(shù)作k倍放大時(shí)，將其他次容器進(jìn)行相應(yīng)的縮小。
[0075]計(jì)算每個次容器的預(yù)設(shè)比例系數(shù)的方法包括:假定頁面在便攜終端屏幕上的可視寬度為U,每個次容器的寬度為w, u除以W的值即為該次容器的預(yù)設(shè)比例系數(shù)k。當(dāng)然,該算法也可以作為調(diào)整任意次容器適應(yīng)屏幕顯示時(shí)，每個次容器的縮放比例系數(shù)的算法。
[0076]步驟214:繪制調(diào)整后的次容器，將所述次容器所包含的待顯示網(wǎng)頁的元素在屏
幕上顯示。
[0077]本申請所述的繪制指利用組合、移動、層疊、縮放、裁剪等技術(shù)手段將所述次容器中包含的內(nèi)容顯示在屏幕上。
[0078]本實(shí)施例所提供的網(wǎng)頁顯示方法，通過使用次容器的面積表示次容器中所包含的網(wǎng)頁內(nèi)容的重要性，在確定將要顯示的次容器時(shí)方便簡潔，避免了大量的運(yùn)算過程，從而也能加快網(wǎng)頁在屏幕上的顯示速度，提高了用戶的體驗(yàn)。
[0079]當(dāng)然，用戶在對網(wǎng)頁進(jìn)行瀏覽時(shí)，不可能僅僅瀏覽網(wǎng)頁的一部分內(nèi)容，當(dāng)用戶需要對當(dāng)前所顯示的部分之外的部分瀏覽時(shí)，需要切換所顯示的網(wǎng)頁的內(nèi)容，基于此，在上述實(shí)施例的基礎(chǔ)上，本申請還提供了第三種網(wǎng)頁顯示方法的實(shí)施方式。
[0080]參見圖3，圖3為本申請實(shí)施例所提供的網(wǎng)頁顯示方法的第三種實(shí)施方式流程圖。
[0081]所述方法包括:
[0082]步驟301:獲取待顯示網(wǎng)頁的源代碼。
[0083]步驟302:解析所述源代碼形成樹狀節(jié)點(diǎn)。
[0084]步驟303:將所述樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版。
[0085]步驟304:根據(jù)排版后的樹狀節(jié)點(diǎn)定位主容器。
[0086]步驟305:定位所述主容器內(nèi)的至少一個次容器。
[0087]步驟306:調(diào)整所述次容器的面積。
[0088]步驟307:繪制調(diào)整后的次容器，將所述次容器所包含的待顯示網(wǎng)頁的元素在屏
_卜.、…/Jn ο
[0089]需要指出的，步驟301至步驟307與上述兩實(shí)施例中所述類似，本申請?jiān)诖瞬辉谫樖觥?br> [0090]步驟308:接收切換命令。
[0091]由上述實(shí)施例可知，網(wǎng)頁在屏幕上顯示時(shí)，默認(rèn)放大顯示重要性最高的次容器的內(nèi)容，而當(dāng)用戶需要瀏覽其他次容器的內(nèi)容時(shí)，可以通過手勢或者便攜終端額外提供的功能控件與便攜終端產(chǎn)生交互操作，放大顯示目標(biāo)次容器的內(nèi)容。當(dāng)便攜終端接收到用戶的手勢或者功能控件等觸發(fā)信息時(shí)，將所述觸發(fā)信號作為切換命令，并根據(jù)所述切換命令將目標(biāo)次容器放大。例如:在目標(biāo)次容器的內(nèi)容上雙擊。
[0092]步驟309:生成所述目標(biāo)次容器的縮放比例系數(shù)U。
[0093]對次容器進(jìn)行切換時(shí)，無須考慮目標(biāo)次容器內(nèi)的網(wǎng)頁元素重要性，僅僅針對所述目標(biāo)次容器與便攜終端的屏幕進(jìn)行調(diào)整。因此，生成目標(biāo)次容器的縮放比例系數(shù)方法可以為，比較便攜終端屏幕的寬度與主容器的寬度，取二者之中最小值；將所述最小值與所述預(yù)設(shè)比例系數(shù)k作乘法計(jì)算，乘法計(jì)算的結(jié)果除以所述目標(biāo)次容器的寬度，得到第一縮放系數(shù)Ul ;將所述主容器的高度值除以所述目標(biāo)次容器的高度值，得到第二縮放系數(shù)u2 ;將所述Ul和所述u2中的最小值確定為所述縮放比例系數(shù)u，如果u小于I則取值為I ;或者按照上述實(shí)施例所述的方法計(jì)算得到每個次容器預(yù)設(shè)比例系數(shù)。
[0094]當(dāng)然，生成縮放比例系數(shù)U的方法不限于此，還可以為其他任意適用的方法，例如根據(jù)次容器的像素值生成，本申請對此不做限制。
[0095]步驟310:將所述目標(biāo)次容器的面積進(jìn)行u倍調(diào)整，并對應(yīng)的調(diào)整其他次容器的面積，以保持次容器的總寬度不變。
[0096]當(dāng)有切換命令觸發(fā)時(shí)，次容器的重要性發(fā)生變化，目標(biāo)次容器成為重要性較高的次容器。因此，所述目標(biāo)次容器的面積在顯示前需要進(jìn)行放大，而為了保證調(diào)整后次容器的總寬度不變，將所述目標(biāo)次容器的面積進(jìn)行放大時(shí)，需要將其他的次容器進(jìn)行相應(yīng)縮??；或者根據(jù)上述實(shí)施例所述的每個次容器的預(yù)設(shè)比例系數(shù)，將目標(biāo)次容器按照其自身的預(yù)設(shè)比例系數(shù)放大，將當(dāng)前所顯示的次容器相應(yīng)縮小。
[0097]步驟311:繪制調(diào)整后的次容器，將所述次容器的元素在屏幕上進(jìn)行顯示。
[0098]調(diào)整后的次容器，目標(biāo)次容器作為重要性較高的次容器面積增大，其他次容器的面積縮小，網(wǎng)頁總體布局發(fā)生變化，當(dāng)再次繪制后，屏幕上清楚顯示的是放大后的目標(biāo)次容器的內(nèi)容。繪制調(diào)整后的次容器的方法與繪制所述當(dāng)前所顯示的次容器的方法類似，本申請?jiān)诖瞬辉儋樖觥?br> [0099]需要指出的，將所述目標(biāo)次容器放大并將其他次容器縮小的過程中，可以為傳統(tǒng)的畫面，如放大目標(biāo)次容器，縮小其他的次容器，也可以通過定時(shí)設(shè)置，使切換過程分幾個步驟完成，該過程可以設(shè)置為動畫效果，提高用戶的交互體驗(yàn)。
[0100]本實(shí)施例所提供的網(wǎng)頁顯示方法，通過用戶與便攜終端的交互操作，將當(dāng)前所顯示的次容器的內(nèi)容切換為目標(biāo)次容器的內(nèi)容，切換過程中，放大所述目標(biāo)次容器，縮小當(dāng)前所顯示的次容器，不僅能提高目標(biāo)次容器的可讀性，而且能夠保留當(dāng)前次容器的細(xì)節(jié)排版。
[0101]本申請所提供的網(wǎng)頁顯示方法，通過將待顯示網(wǎng)頁源代碼解析形成樹狀節(jié)點(diǎn)，并定位所述樹狀節(jié)點(diǎn)的主容器及次容器，其中，每個所述次容器包含一部分待顯示網(wǎng)頁的元素。然后調(diào)整每個所述次容器的面積，并繪制調(diào)整后的次容器，所述次容器包含的待顯示網(wǎng)頁的元素在屏幕上顯示。與現(xiàn)有技術(shù)相比，本申請實(shí)施例通過將所述待顯示網(wǎng)頁模塊化，當(dāng)對網(wǎng)頁的部分元素進(jìn)行調(diào)整時(shí)，實(shí)質(zhì)上所調(diào)整的對象是包含該部分元素的次容器，因此，該部分元素的放大不會破壞該次容器的細(xì)節(jié)排版。同時(shí)，由于各個次容器是相互獨(dú)立的模塊，因此，對某一次容器的面積進(jìn)行調(diào)整時(shí)，其他次容器的排版不會受到任何影響。由此可見，本申請實(shí)施例所提供的網(wǎng)頁顯示方法及裝置，不但能保證網(wǎng)頁的可讀性，在此基礎(chǔ)上也能夠保留網(wǎng)頁的細(xì)節(jié)排版，改善了用戶體驗(yàn)。
[0102]與上述實(shí)現(xiàn)方法相對應(yīng)，本申請實(shí)施例還提供了 一種網(wǎng)頁顯示裝置。
[0103]參見圖4，圖4為本申請實(shí)施例所提供的網(wǎng)頁顯示裝置結(jié)構(gòu)示意圖。
[0104]所述裝置包括:獲取單元11、解析單元12、排版單元13、第一定位單元14、第二定位單元15、第一調(diào)整單元16和繪制單元17，其中，所述獲取單元11，用于獲取待顯示網(wǎng)頁的源代碼；所述解析單元12，用于解析所述獲取單元11獲取到的源代碼形成樹狀節(jié)點(diǎn)；所述排版單元13，用于將所述解析單元12解析形成的樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版；所述第一定位單元14，用于根據(jù)所述排版單元13排版后的寬度定位主容器；所述第二定位單元15，用于定位所述主容器內(nèi)的至少一個次容器，其中，每個所述次容器包含一部分所述待顯示網(wǎng)頁的元素；所述第一調(diào)整單元16，用于調(diào)整所述第二定位單元15定位得到次容器的面積；所述繪制單元17，用于繪制所述第一調(diào)整單元16調(diào)整后的次容器，將所述次容器所包含的待顯示網(wǎng)頁的元素在屏幕上顯示。
[0105]其中，所述第一定位單元包括:第一判斷單元和第二判斷單元；所述第二定位單元包括:第三判斷單元；所述第一調(diào)整單元包括:第一計(jì)算單元、第一比較單元和縮放單
J Li ο
[0106]所述裝置中各個單元的功能和作用的實(shí)現(xiàn)過程詳見上述方法中對應(yīng)的實(shí)現(xiàn)過程，在此不再贅述。
[0107]本申請所提供的網(wǎng)頁顯示裝置，通過將待顯示網(wǎng)頁源代碼解析形成樹狀節(jié)點(diǎn)，并定位所述樹狀節(jié)點(diǎn)的主容器及次容器，其中，每個所述次容器包含一部分待顯示網(wǎng)頁的元素。然后調(diào)整每個所述次容器的面積，并繪制調(diào)整后的次容器，所述次容器包含的待顯示網(wǎng)頁的元素在屏幕上顯示。與現(xiàn)有技術(shù)相比，本申請實(shí)施例通過將所述待顯示網(wǎng)頁模塊化，當(dāng)對網(wǎng)頁的部分元素進(jìn)行調(diào)整時(shí)，實(shí)質(zhì)上所調(diào)整的對象是包含該部分元素的次容器，因此，該部分元素的放大不會破壞該次容器的細(xì)節(jié)排版。同時(shí)，由于各個次容器是相互獨(dú)立的模塊，因此，對某一次容器的面積進(jìn)行調(diào)整時(shí)，其他次容器的排版不會受到任何影響。由此可見，本申請實(shí)施例所提供的網(wǎng)頁顯示方法及裝置，不但能保證網(wǎng)頁的可讀性，在此基礎(chǔ)上也能夠保留網(wǎng)頁的細(xì)節(jié)排版，改善了用戶體驗(yàn)。
[0108]參見圖5，圖5為本申請實(shí)施例所提供的網(wǎng)頁顯示裝置的第二種實(shí)施方式結(jié)構(gòu)示意圖。
[0109]在上述實(shí)施例的基礎(chǔ)上，本實(shí)施例所述裝置包括:獲取單元20、解析單元21、排版單元22、第一判斷單元23、第二判斷單元24、第三判斷單元25、第一計(jì)算單元26、第一比較單元27、縮放單元28和繪制單元29，其中，所述獲取單元20、所述解析單元21、所述排版單元22和所述繪制單元29的功能及連接方式與上述實(shí)施例類似，本申請?jiān)诖瞬辉儋樖觥Ｋ龅谝慌袛鄦卧?3，用于判斷當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為空或者其上級節(jié)點(diǎn)是否為主容器；所述第二判斷單元24，用于當(dāng)所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為空或者為主容器時(shí)，判斷當(dāng)前節(jié)點(diǎn)的高度是否為固定值；所述第三判斷單元26，用于判斷所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為主容器；所述第一計(jì)算單元26，用于將計(jì)算每個所述次容器的面積，并得到所有次容器面積的平均值；所述第一比較單元27，用于比較所述第一計(jì)算單元26計(jì)算得到的每個所述次容器的面積與所述平均值的大??；所述縮放單元28，用于當(dāng)所述次容器的面積大于所述平均值，將所述次容器按預(yù)設(shè)比例系數(shù)k進(jìn)行放大，其中，所述k大于I ;同時(shí)，將其他次容器進(jìn)行相應(yīng)縮小，以保持次容器的總寬度不變。
[0110]在上述實(shí)施例的基礎(chǔ)上，在本實(shí)施例中，所述第一定位單元，具體用于當(dāng)所述當(dāng)前節(jié)點(diǎn)高度不是固定值時(shí)，如果上級節(jié)點(diǎn)為空，將當(dāng)前節(jié)點(diǎn)定位為主容器；如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器，當(dāng)所述當(dāng)前節(jié)點(diǎn)的寬度大于等于根節(jié)點(diǎn)寬度的50%，且大于等于其上級節(jié)點(diǎn)寬度的90%，將所述當(dāng)前節(jié)點(diǎn)定位為主容器；所述第二定位單元，具體用于當(dāng)所述第三判斷單元判斷得到所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器時(shí)，如果所述當(dāng)前節(jié)點(diǎn)的寬度為其上級節(jié)點(diǎn)寬度的20%到80%，將所述當(dāng)前節(jié)點(diǎn)定位為次容器。
[0111]所述裝置中各個單元的功能和作用的實(shí)現(xiàn)過程詳見上述方法中對應(yīng)的實(shí)現(xiàn)過程，在此不再贅述。
[0112]本實(shí)施例所提供的網(wǎng)頁顯示裝置，通過使用次容器的面積表示次容器中所包含的網(wǎng)頁內(nèi)容的重要性，在確定將要顯示的次容器時(shí)方便簡潔，避免了大量的運(yùn)算過程，從而也能加快網(wǎng)頁在屏幕上的顯示速度，提高了用戶的體驗(yàn)。
[0113]為了方便用戶對所顯示內(nèi)容的切換，在上述實(shí)施例的基礎(chǔ)上，本申請實(shí)施例還提供的第三種網(wǎng)頁顯示裝置。
[0114]參見圖6，圖6為本申請實(shí)施例所提供的網(wǎng)頁顯示裝置的第三種實(shí)施方式結(jié)構(gòu)示意圖。
[0115]所述裝置包括:獲取單元30、解析單元31、排版單元32、第一定位單元33、第二定位單元34、第一調(diào)整單元35、繪制單元36、接收單元37、生成單元38和第二調(diào)整單元39，其中，所述獲取單元30、所述解析單元31、所述排版單元32、所述第一定位單元33、所述第二定位單元34、所述第一調(diào)整單元35和所述繪制單元36的功能作用及連接關(guān)系與上述實(shí)施方式類似，本申請?jiān)诖瞬辉儋樖?。所述接收單?7，用于接收切換命令，以放大顯示目標(biāo)次容器的內(nèi)容；所述生成單元38，用于生成所述目標(biāo)次容器的縮放比例系數(shù)u ;所述第二調(diào)整單元39，用于當(dāng)所述生成單元生成縮放比例系數(shù)u后，將所述目標(biāo)次容器的面積進(jìn)行u倍調(diào)整，并對應(yīng)調(diào)整其他次容器的面積，以保持次容器的總寬度不變。
[0116]在上述實(shí)施例的基礎(chǔ)上，在本實(shí)施例中，所述繪制單元，還用于繪制所述第二調(diào)整單元調(diào)整后的次容器，將所述次容器的元素在屏幕上進(jìn)行顯示。
[0117]其中，所述生成單元包括:第二比較單元、第二計(jì)算單元和確定單元，所述第二比較單元，用于比較所述屏幕的寬度與所述主容器的寬度，取二者之中的最小值；所述第二計(jì)算單元，具體用于將所述最小值與所述預(yù)設(shè)比例系數(shù)k作乘法計(jì)算，乘法計(jì)算的結(jié)果除以所述目標(biāo)次容器的寬度，得到第一縮放系數(shù)Ul ;將所述主容器的高度值除以所述目標(biāo)次容器的高度值，得到第二縮放系數(shù)u2;所述確定單元，用于將所述第二計(jì)算單元計(jì)算得到的ul和u2中的最小值確定為所述縮放比例系數(shù)U。
[0118]所述裝置中各個單元的功能和作用的實(shí)現(xiàn)過程詳見上述方法中對應(yīng)的實(shí)現(xiàn)過程，在此不再贅述。
[0119]本實(shí)施例所提供的網(wǎng)頁顯示裝置，通過用戶與便攜終端的交互操作，將當(dāng)前所顯示的次容器的內(nèi)容切換為目標(biāo)次容器的內(nèi)容，切換過程中，放大所述目標(biāo)次容器，縮小當(dāng)前所顯示的次容器，不僅能提高目標(biāo)次容器的可讀性，而且能夠保留當(dāng)前次容器的細(xì)節(jié)排版。
[0120]綜上所述，本申請所提供的網(wǎng)頁顯示方法及裝置，通過將待顯示網(wǎng)頁源代碼解析形成樹狀節(jié)點(diǎn)，并定位所述樹狀節(jié)點(diǎn)的主容器及次容器，其中，每個所述次容器包含一部分待顯示網(wǎng)頁的元素。然后調(diào)整每個所述次容器的面積，并繪制調(diào)整后的次容器，所述次容器包含的待顯示網(wǎng)頁的元素在屏幕上顯示。與現(xiàn)有技術(shù)相比，本申請實(shí)施例通過將所述待顯示網(wǎng)頁模塊化，當(dāng)對網(wǎng)頁的部分元素進(jìn)行調(diào)整時(shí)，實(shí)質(zhì)上所調(diào)整的對象是包含該部分元素的次容器，因此，該部分元素的放大不會破壞該次容器的細(xì)節(jié)排版。同時(shí)，由于各個次容器是相互獨(dú)立的模塊，因此，對某一次容器的面積進(jìn)行調(diào)整時(shí)，其他次容器的排版不會受到任何影響。由此可見，本申請實(shí)施例所提供的網(wǎng)頁顯示方法及裝置，不但能保證網(wǎng)頁的可讀性，在此基礎(chǔ)上也能夠保留網(wǎng)頁的細(xì)節(jié)排版，改善了用戶體驗(yàn)。
[0121]本發(fā)明可以在由計(jì)算機(jī)執(zhí)行的計(jì)算機(jī)可執(zhí)行指令的一般上下文中描述，例如程序模塊。一般地，程序模塊包括執(zhí)行特定任務(wù)或?qū)崿F(xiàn)特定抽象數(shù)據(jù)類型的例程、程序、對象、組件、數(shù)據(jù)結(jié)構(gòu)等等。也可以在分布式計(jì)算環(huán)境中實(shí)踐本發(fā)明，在這些分布式計(jì)算環(huán)境中，由通過通信網(wǎng)絡(luò)而被連接的遠(yuǎn)程處理設(shè)備來執(zhí)行任務(wù)。在分布式計(jì)算環(huán)境中，程序模塊可以位于包括存儲設(shè)備在內(nèi)的本地和遠(yuǎn)程計(jì)算機(jī)存儲介質(zhì)中。
[0122]需要說明的是，在本文中，諸如第一和第二等之類的關(guān)系術(shù)語僅僅用來將一個實(shí)體或者操作與另一個實(shí)體或操作區(qū)分開來，而不一定要求或者暗示這些實(shí)體或操作之間存在任何這種實(shí)際的關(guān)系或者順序。而且，術(shù)語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者設(shè)備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者設(shè)備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括所述要素的過程 、方法、物品或者設(shè)備中還存在另外的相同要素。
[0123]以上所述僅是本發(fā)明的【具體實(shí)施方式】，應(yīng)當(dāng)指出，對于本【技術(shù)領(lǐng)域】的普通技術(shù)人員來說，在不脫離本發(fā)明原理的前提下，還可以做出若干改進(jìn)和潤飾，這些改進(jìn)和潤飾也應(yīng)視為本發(fā)明的保護(hù)范圍。
【權(quán)利要求】
1.一種網(wǎng)頁顯示方法，其特征在于，所述方法包括: 獲取待顯示網(wǎng)頁的源代碼； 解析所述源代碼形成樹狀節(jié)點(diǎn)； 將所述樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版； 根據(jù)排版后的樹狀節(jié)點(diǎn)定位主容器； 定位所述主容器內(nèi)的至少一個次容器，其中，每個所述次容器包含一部分所述待顯示網(wǎng)頁的元素； 調(diào)整所述次容器的面積； 繪制調(diào)整后的次容器，將所述次容器所包含的待顯示網(wǎng)頁的元素在屏幕上顯示。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)排版后的樹狀節(jié)點(diǎn)定位主容器，包括: 判斷當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為空或者為主容器； 當(dāng)所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為空或者為主容器時(shí)，判斷當(dāng)前節(jié)點(diǎn)的高度是否為固定值； 當(dāng)所述當(dāng)前節(jié)點(diǎn)高度不是固定值時(shí)，如果上級節(jié)點(diǎn)為空，將當(dāng)前節(jié)點(diǎn)定位為主容器；如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器，當(dāng)所述當(dāng)前節(jié)點(diǎn)的寬度大于等于根節(jié)點(diǎn)寬度的50%，且大于等于其上級節(jié)點(diǎn)寬度的90%，將所述當(dāng)前節(jié)點(diǎn)定位為主容器。
3.根據(jù)權(quán)利要求2所述的方法，其特征在于，所述定位所述主容器內(nèi)包含的至少一個次容器，包括: 判斷所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為主容器； 當(dāng)所述上級節(jié)點(diǎn)為主容器，如果所述當(dāng)前節(jié)點(diǎn)的寬度為其上級節(jié)點(diǎn)寬度的20%到80%，將所述當(dāng)前節(jié)點(diǎn)定位為次容器。
4.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述調(diào)整所述次容器的面積，包括: 計(jì)算每個所述次容器的面積，并得到所有次容器面積的平均值； 比較每個所述次容器的面積與所述平均值的大?。? 若所述次容器的面積大于所述平均值，將所述次容器按預(yù)設(shè)比例系數(shù)k進(jìn)行放大，其中，所述k大于I ;同時(shí)，將其他次容器進(jìn)行相應(yīng)縮小，以保持次容器的總寬度不變。
5.根據(jù)權(quán)利要求1至4中任一權(quán)項(xiàng)所述的方法，其特征在于，所述方法還包括: 接收切換命令，以放大顯示目標(biāo)次容器的內(nèi)容； 生成所述目標(biāo)次容器的縮放比例系數(shù)u ; 將所述目標(biāo)次容器的面積進(jìn)行u倍調(diào)整，并對應(yīng)調(diào)整其他次容器的面積，以保持次容器的總寬度不變； 繪制調(diào)整后的次容器，將所述次容器的元素在屏幕上進(jìn)行顯示。
6.根據(jù)權(quán)利要求5所述的方法，其特征在于，所述生成所述目標(biāo)次容器的縮放比例系數(shù)，包括: 比較所述屏幕的寬度與所述主容器的寬度，取二者之中的最小值； 將所述最小值與所述預(yù)設(shè)比例系數(shù)k作乘法計(jì)算，乘法計(jì)算的結(jié)果除以所述目標(biāo)次容器的寬度，得到第一縮放系數(shù)Ul ;將所述主容器的高度值除以所述目標(biāo)次容器的高度值，得到第二縮放系數(shù)u2 ；將所述ul和所述u2中的最小值確定為所述縮放比例系數(shù)U。
7.一種網(wǎng)頁顯示裝置，其特征在于，所述裝置包括: 獲取單元，用于獲取待顯示網(wǎng)頁的源代碼； 解析單元，用于解析所述獲取單元獲取到的源代碼形成樹狀節(jié)點(diǎn)； 排版單元，用于將所述解析單元解析形成的樹狀節(jié)點(diǎn)按照所述源代碼的樣式規(guī)范進(jìn)行排版； 第一定位單元，用于根據(jù)所述排版單元排版后的樹狀節(jié)點(diǎn)定位主容器； 第二定位單元，用于定位所述主容器內(nèi)的至少一個次容器，其中，每個所述次容器包含一部分所述待顯示網(wǎng)頁的元素； 第一調(diào)整單元，用于調(diào)整所述第二定位單元定位得到次容器的面積； 繪制單元，用于繪制所述第一調(diào)整單元調(diào)整后的次容器，將所述次容器所包含的待顯示網(wǎng)頁的元素在屏幕上顯示。
8.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述第一定位單元包括:第一判斷單元和第二判斷單元，其中， 所述第一判斷單元，用于判斷當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為空或者其上級節(jié)點(diǎn)是否為主容器； 所述第二判斷單元，用于當(dāng)所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為空或者為主容器時(shí)，判斷當(dāng)前節(jié)點(diǎn)的高度是否為固定值； 所述第一定位單元，具體用于當(dāng)所述當(dāng)前節(jié)點(diǎn)高度不是固定值時(shí)，如果上級節(jié)點(diǎn)為空，將當(dāng)前節(jié)點(diǎn)定位為主容器；如果所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器，當(dāng)所述當(dāng)前節(jié)點(diǎn)的寬度大于等于根節(jié)點(diǎn)寬度的50%，且大于等于其上級節(jié)點(diǎn)寬度的90%，將所述當(dāng)前節(jié)點(diǎn)定位為主容器。
9.根據(jù)權(quán)利要求8所述的裝置，其特征在于，所述第二定位單元包括:第三判斷單元，其中， 所述第三判斷單元，用于判斷所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)是否為主容器； 所述第二定位單元，具體用于當(dāng)所述當(dāng)前節(jié)點(diǎn)的上級節(jié)點(diǎn)為主容器時(shí)，如果所述當(dāng)前節(jié)點(diǎn)的寬度為其上級節(jié)點(diǎn)寬度的20%到80%，將所述當(dāng)前節(jié)點(diǎn)定位為次容器。
10.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述第一調(diào)整單元包括:第一計(jì)算單元、第一比較單元和縮放單元，其中， 所述第一計(jì)算單元，用于計(jì)算每個所述次容器的面積，并得到所有次容器面積的平均值； 所述第一比較單元，用于比較所述第一計(jì)算單元計(jì)算得到的每個所述次容器的面積與所述平均值的大??； 所述縮放單元，用于若所述次容器的面積大于所述平均值，將所述次容器按預(yù)設(shè)比例系數(shù)k進(jìn)行放大，其中，所述k大于I ;同時(shí)，將其他次容器進(jìn)行相應(yīng)縮小，以保持次容器的總寬度不變。
11.根據(jù)權(quán)利要求7至10中任一權(quán)項(xiàng)所述裝置，其特征在于，所述裝置還包括:接收單元、生成單元和第二調(diào)整單元，其中， 所述接收單元， 用于接收切換命令；所述生成單元，用于生成所述目標(biāo)次容器的縮放比例系數(shù)U ; 所述第二調(diào)整單元，用于當(dāng)所述生成單元生成縮放比例系數(shù)U后，將所述目標(biāo)次容器的面積進(jìn)行U倍調(diào)整，并對應(yīng)調(diào)整其他次容器的面積，以保持次容器的總寬度不變； 所述繪制單元，還用于繪制所述第二調(diào)整單元調(diào)整后的次容器，將所述次容器的元素在屏幕上進(jìn)行顯示。
12.根據(jù)權(quán)利要求11所述的裝置，其特征在于，所述生成單元包括:第二比較單元、第二計(jì)算單元和確定單元，其中， 所述第二比較單元，用于比較所述屏幕的寬度與所述主容器的寬度，取二者之中的最小值； 所述第二計(jì)算單元，具體用于將所述最小值與所述預(yù)設(shè)比例系數(shù)k作乘法計(jì)算，乘法計(jì)算的結(jié)果除以所述目標(biāo)次容器的寬度，得到第一縮放系數(shù)Ul ;將所述主容器的高度值除以所述目標(biāo)次容器的高度值，得到第二縮放系數(shù)u2 ； 所述確定單元，用 于將所述第二計(jì)算單元計(jì)算得到的Ul和u2中的最小值確定為所述縮放比例系數(shù)U。
【文檔編號】G06F17/30GK103605783SQ201310629615
【公開日】2014年2月26日 申請日期:2013年11月29日 優(yōu)先權(quán)日:2013年11月29日
【發(fā)明者】曾錦和, 梁捷 申請人:優(yōu)視科技有限公司