一種網(wǎng)頁自適應(yīng)布局方法及裝置制造方法
【專利摘要】本發(fā)明提出一種網(wǎng)頁自適應(yīng)布局方法及裝置,其中方法包括以下步驟:將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個移動終端屏幕的寬度;將web網(wǎng)頁的字體大小修改為適應(yīng)多個移動終端屏幕的字體大??;以及使得web網(wǎng)頁上不同的分塊可以滑動。根據(jù)本發(fā)明的網(wǎng)頁自適應(yīng)布局方法,通過設(shè)定屏幕寬度與字體大小能夠自動適應(yīng)屏幕,使得網(wǎng)頁能夠適應(yīng)于各種移動終端,提高了網(wǎng)頁的適用性并增強(qiáng)了用戶的體驗(yàn)感。
【專利說明】一種網(wǎng)頁自適應(yīng)布局方法及裝置
【技術(shù)領(lǐng)域】
[0001 ] 本發(fā)明涉及網(wǎng)站頁面轉(zhuǎn)碼【技術(shù)領(lǐng)域】,特別涉及一種網(wǎng)頁自適應(yīng)布局方法及裝置。【背景技術(shù)】
[0002]現(xiàn)如今,移動終端越來越普及,但是現(xiàn)在桌面設(shè)備仍占有不少的用戶比例,因此目前互聯(lián)網(wǎng)中的大部分網(wǎng)頁還是針對桌面設(shè)備設(shè)計的。因此需要對原網(wǎng)頁的組織結(jié)構(gòu)及網(wǎng)頁的樣式進(jìn)行修改,使網(wǎng)頁轉(zhuǎn)換后可以普遍適用于各種移動終端。
[0003]現(xiàn)有的技術(shù)主要是通過將一個桌面設(shè)備的網(wǎng)頁轉(zhuǎn)換成一個適應(yīng)于移動設(shè)備的固定的網(wǎng)頁,因此至少存在以下問題:
[0004](I)網(wǎng)頁寬度只能適應(yīng)一種屏幕大小的移動終端,不能普遍適應(yīng);
[0005](2)網(wǎng)頁布局不能夠自動調(diào)整,無法根據(jù)終端屏幕的改變而進(jìn)行相應(yīng)的動態(tài)的改變。
【發(fā)明內(nèi)容】
[0006]本發(fā)明旨在至少解決上述技術(shù)問題之一。
[0007]為此,本發(fā)明的第一個目的在于提出一種網(wǎng)頁自適應(yīng)布局方法。
[0008]本發(fā)明的第二個目的在于提出一種網(wǎng)頁自適應(yīng)布局裝置。
[0009]為了實(shí)現(xiàn)上述目的,根據(jù)本發(fā)明的第一方面實(shí)施例的網(wǎng)頁自適應(yīng)布局方法包括以下步驟:將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個移動終端屏幕的寬度;將所述web網(wǎng)頁的字體大小修改為適應(yīng)所述多個移動終端屏幕的字體大?。灰约笆沟盟鰓eb網(wǎng)頁上不同的分塊可以滑動。
[0010]根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法,通過設(shè)定屏幕寬度與字體大小能夠自動適應(yīng)屏幕,使得網(wǎng)頁能夠適應(yīng)于各種移動終端,提高了網(wǎng)頁的適用性并增強(qiáng)了用戶的體驗(yàn)感。
[0011]為實(shí)現(xiàn)上述目的,本發(fā)明第二方面的實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置包括:寬度調(diào)整模塊,所述寬度調(diào)整模塊用于將Web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個手機(jī)屏幕的寬度;字體調(diào)整模塊,字體調(diào)整模塊用于將所述web網(wǎng)頁的字體大小修改為適應(yīng)所述多個手機(jī)屏幕的字體大??;以及滑動模塊,所述滑動模塊用于使得所述web網(wǎng)頁上不同的分塊可以滑動。
[0012]根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置,通過寬度調(diào)整模塊字體調(diào)整模塊以及滑動模塊使網(wǎng)頁布局能夠自動適應(yīng)移動終端的大小,提高了網(wǎng)頁的適用性并增強(qiáng)了用戶的體驗(yàn)感。
[0013]本發(fā)明的附加方面和優(yōu)點(diǎn)將在下面的描述中部分給出,部分將從下面的描述中變得明顯,或通過本發(fā)明的實(shí)踐了解到。
【專利附圖】
【附圖說明】
[0014]本發(fā)明上述的和/或附加的方面和優(yōu)點(diǎn)從下面結(jié)合附圖對實(shí)施例的描述中將變得明顯和容易理解,其中:
[0015]圖1為根據(jù)本發(fā)明一個實(shí)施例的一種網(wǎng)頁自適應(yīng)布局方法的流程圖;
[0016]圖2為根據(jù)本發(fā)明一個實(shí)施例的一種網(wǎng)頁自適應(yīng)布局方法的流程圖;
[0017]圖3為根據(jù)本發(fā)明一個實(shí)施例的一種網(wǎng)頁自適應(yīng)布局方法的流程圖;
[0018]圖4為根據(jù)本發(fā)明一個實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置的結(jié)構(gòu)示意圖;
[0019]圖5為根據(jù)本發(fā)明一個實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置的結(jié)構(gòu)示意圖;以及
[0020]圖6為根據(jù)本發(fā)明一個實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0021]下面詳細(xì)描述本發(fā)明的實(shí)施例,所述實(shí)施例的示例在附圖中示出,其中自始至終相同或類似的標(biāo)號表示相同或類似的元件或具有相同或類似功能的元件。下面通過參考附圖描述的實(shí)施例是示例性的,僅用于解釋本發(fā)明,而不能解釋為對本發(fā)明的限制。
[0022]參照下面的描述和附圖,將清楚本發(fā)明的實(shí)施例的這些和其他方面。在這些描述和附圖中,具體公開了本發(fā)明的實(shí)施例中的一些特定實(shí)施方式,來表示實(shí)施本發(fā)明的實(shí)施例的原理的一些方式,但是應(yīng)當(dāng)理解,本發(fā)明的實(shí)施例的范圍不受此限制。相反,本發(fā)明的實(shí)施例包括落入所附加權(quán)利要求書的精神和內(nèi)涵范圍內(nèi)的所有變化、修改和等同物。
[0023]下面參考說明書附圖描述根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法。
[0024]一種網(wǎng)頁自適應(yīng)布局方法,包括以下步驟:將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個移動終端屏幕的寬度Jfweb網(wǎng)頁的字體大小修改為適應(yīng)多個移動終端屏幕的字體大??;以及使得web網(wǎng)頁上不同的分塊可以滑動。。
[0025]圖1為本發(fā)明一個實(shí)施例的網(wǎng)頁自適應(yīng)布局方法的流程圖。
[0026]如圖1所示,根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法包括下述步驟。
[0027]步驟SlOl:將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個移動終端屏幕的寬度。
[0028]具體地,將web網(wǎng)頁中以**px為單位的寬度按照預(yù)定規(guī)則替換成**%或替換成自動寬度。
[0029]更具體地,先通過對head元素中可視區(qū)域的meta標(biāo)簽〈meta name= " viewport " content= " width=device-width, initial-scale=l " /> 進(jìn)行設(shè)置,將 width 設(shè)定為device-width,則將網(wǎng)頁的寬度被設(shè)置為設(shè)備的屏幕寬度,然后設(shè)定initial_scale=l,即縮放比例設(shè)置為一,使網(wǎng)頁初始化能夠按照屏幕的寬度大小初始化,而不會以放大或是縮小比例的屏幕寬度初始化,其中<meta>元素可提供有關(guān)頁面的元信息(meta-1nformation)。
[0030]。然后將網(wǎng)頁中的寬度固定大小**px設(shè)定按照預(yù)定的規(guī)則替換成**%或者直接修改為自動寬度。
[0031]步驟S102:將web網(wǎng)頁的字體大小修改為適應(yīng)多個移動終端屏幕的字體大小。
[0032]具體地,首先刪除web網(wǎng)頁中“font-size:**px” (font-size:字體大??;px:像素);然后計算web網(wǎng)頁的基準(zhǔn)大小并將基準(zhǔn)大小設(shè)置在body (body是html的一種標(biāo)簽,body包含文檔的所有內(nèi)容,例如文本、超鏈接、圖像、表格和列表等)中;最后將web網(wǎng)頁的其余部分的大小通過“font_size:**em” (em表示當(dāng)前的字體尺寸)進(jìn)行修改。
[0033]更具體地,將web網(wǎng)頁中的字體樣式中設(shè)定的固定字體大小“font_size:**px”給刪除,再通過基于統(tǒng)計的方法將web網(wǎng)頁的基準(zhǔn)大小計算出來,然后將這個大小設(shè)置在網(wǎng)頁的正體body內(nèi),其他部分的字體大小通過設(shè)定字體大小“;^0111:-8126:**6111”來設(shè)定,em單位代表基準(zhǔn)大小的同等大小,則字體大小為基準(zhǔn)大小的相對單位大小。
[0034]步驟S103:使得web網(wǎng)頁上不同的分塊可以滑動。
[0035]具體地,首先對web網(wǎng)頁上不同的分塊加上float (css的一種,設(shè)置標(biāo)簽的滑動屬性)屬性;然后刪除固定位置信息。
[0036]更具體地,通過在css (層疊樣式表:Cascading Style Sheets)樣式中給web頁面中不同的模塊加上浮動float屬性,然后再刪除分塊屬性中固定的位置設(shè)定的信息,讓各個分塊可以按照根據(jù)頁面大小不同進(jìn)行滑動形成流式布局。
[0037]在本發(fā)明的一個實(shí)施例中,多個移動終端屏幕的寬度包括小于等于320px,320-480px, 480-800px,大于等于 800px。
[0038]根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法,通過修改頁面寬度和字體大小為自動適應(yīng)屏幕大小,并且頁面中的模塊會根據(jù)頁面大小自動滑動,使得網(wǎng)頁能夠自動適應(yīng)不同移動設(shè)備的屏幕而改變布局,提高了網(wǎng)頁的可瀏覽性且提升了用戶的體驗(yàn)感。
[0039]圖2為本發(fā)明又一個實(shí)施例的網(wǎng)頁自適應(yīng)布局方法的流程圖。
[0040]如圖2所示,根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法包括下述步驟。
[0041]步驟S201網(wǎng)頁的寬度調(diào)整為適應(yīng)多個移動終端屏幕的寬度。
[0042]具體地,將web網(wǎng)頁中以**px為單位的寬度按照預(yù)定規(guī)則替換成**%或替換成自動寬度。`
[0043]更具體地,先通過對head元素中可視區(qū)域的meta標(biāo)簽〈meta name= " viewport " content= " width=device-width, initial-scale=l " /> 進(jìn)行設(shè)置,將 width 設(shè)定為device-width,則將網(wǎng)頁的寬度被設(shè)置為設(shè)備的屏幕寬度,然后設(shè)定initial_scale=l,即縮放比例設(shè)置為一,使網(wǎng)頁初始化能夠按照屏幕的寬度大小初始化,而不會以放大或是縮小比例的屏幕寬度初始化。然后將網(wǎng)頁中的寬度固定大小**px設(shè)定按照預(yù)定的規(guī)則替換成**%或者直接修改為自動寬度。
[0044]步驟S202:將web網(wǎng)頁的字體大小修改為適應(yīng)多個移動終端屏幕的字體大小。
[0045]具體地,首先刪除web網(wǎng)頁中“font_size:**px” ;然后計算web網(wǎng)頁的基準(zhǔn)大小并將基準(zhǔn)大小設(shè)置在body中;最后將web網(wǎng)頁的其余部分的大小通過“font_size:**em”進(jìn)行修改。
[0046]更具體地,將web網(wǎng)頁中的字體樣式中設(shè)定的固定字體大小“font_size:**px”給刪除,再通過基于統(tǒng)計的方法將web網(wǎng)頁的基準(zhǔn)大小計算出來,然后將這個大小設(shè)置在網(wǎng)頁的正體body內(nèi),其他部分的字體大小通過設(shè)定字體大小“;^0111:-8126:**6111”來設(shè)定,em單位代表基準(zhǔn)大小的同等大小,則字體大小為基準(zhǔn)大小的相對單位大小。
[0047]步驟S203:使得web網(wǎng)頁上不同的分塊可以滑動。
[0048]具體地,首先對web網(wǎng)頁上不同的分塊加上float屬性;然后刪除固定位置信息。
[0049]更具體地,通過在css樣式中給web頁面中不同的模塊加上浮動float屬性,然后再分塊屬性只能怪刪除固定的位置設(shè)定的信息,讓各個分塊可以按照根據(jù)頁面大小不同進(jìn)行滑動形成流式布局。
[0050]步驟S204:根據(jù)多個移動終端屏幕的大小加載不同的css文件。[0051]具體地,在web中添加多種css樣式文件,web頁面在移動終端中初始化時,根據(jù)移動終端屏幕的大小不同而加載相對應(yīng)的CSS樣式文件。
[0052]在本發(fā)明的一個實(shí)施例中,多個移動終端屏幕的寬度包括小于等于320px,320-480px, 480-800px,大于等于 800px。
[0053]根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法,通過在頁面初始化時加載不同css樣式文件來改變布局展現(xiàn),讓頁面能夠適應(yīng)不同移動終端的屏幕,提高了網(wǎng)頁的可瀏覽性以及提升用戶的體驗(yàn)感。
[0054]圖3為本發(fā)明又一個實(shí)施例的網(wǎng)頁自適應(yīng)布局方法的流程圖。
[0055]如圖3所示,根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法包括下述步驟。
[0056]步驟S301:將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個移動終端屏幕的寬度。
[0057]具體地,將web網(wǎng)頁中以**px為單位的寬度按照預(yù)定規(guī)則替換成**%或替換成自動寬度。
[0058]更具體地,先通過對head元素中可視區(qū)域的meta標(biāo)簽〈meta name= " viewport " content= " width=device-width, initial-scale=l " /> 進(jìn)行設(shè)置,將 width 設(shè)定為device-width,則將網(wǎng)頁的寬度被設(shè)置為設(shè)備的屏幕寬度,然后設(shè)定initial_scale=l,即縮放比例設(shè)置為一,使網(wǎng)頁初始化能夠按照屏幕的寬度大小初始化,而不會以放大或是縮小比例的屏幕寬度初始化。然后將網(wǎng)頁中的寬度固定大小**px設(shè)定按照預(yù)定的規(guī)則替換成**%或者直接修改為自動寬度。
[0059]步驟S302:將web網(wǎng)頁的字體大小修改為適應(yīng)多個移動終端屏幕的字體大小。
[0060]具體地,首先刪除web網(wǎng)頁中“font_size:**px” ;然后計算web網(wǎng)頁的基準(zhǔn)大小并將基準(zhǔn)大小設(shè)置在body中;最后將web網(wǎng)頁的其余部分的大小通過“font_size:**em”進(jìn)行修改。
[0061]更具體地,將web網(wǎng)頁中的字體樣式中設(shè)定的固定字體大小“font_size:**px”給刪除,再通過基于統(tǒng)計的方法將web網(wǎng)頁的基準(zhǔn)大小計算出來,然后將這個大小設(shè)置在網(wǎng)頁的正體body內(nèi),其他部分的字體大小通過設(shè)定字體大小“font-size 來設(shè)定,em單位代表基準(zhǔn)大小的同等大小,則字體大小為基準(zhǔn)大小的相對單位大小。
[0062]步驟S303:使得web網(wǎng)頁上不同的分塊可以滑動。
[0063]具體地,首先對web網(wǎng)頁上不同的分塊加上float屬性;然后刪除固定位置信息。
[0064]更具體地,通過在css樣式中給web頁面中不同的模塊加上浮動float屬性,然后再分塊屬性只能怪刪除固定的位置設(shè)定的信息,讓各個分塊可以按照根據(jù)頁面大小不同進(jìn)行滑動形成流式布局。
[0065]步驟S304:根據(jù)多個移動終端屏幕的大小加載不同的css文件。
[0066]具體地,在web中添加多種css樣式文件,web頁面在移動終端中初始化時,根據(jù)移動終端屏幕的大小不同而加載相對應(yīng)的CSS樣式文件。
[0067]步驟S305:在不同的css文件中設(shè)置max_width (定義元素的最大寬度)屬性以改變圖片的大小。
[0068]具體地,通過在不同的css樣式文件中設(shè)置圖片的最大寬度max-width屬性來改變圖片的顯示寬度,在加載不同的css樣式文件時,圖片顯示出不同的大小。
[0069]在本發(fā)明的一個實(shí)施例中,多個移動終端屏幕的寬度包括小于等于320px,320-480px, 480-800px,大于等于 800px。
[0070]根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法,通過在頁面初始化時加載不同css樣式文件來頁面中圖片顯示的大小,讓圖片顯示能夠適應(yīng)不同移動終端的屏幕,提高了網(wǎng)頁中圖片的可瀏覽性以及提升用戶的體驗(yàn)感。
[0071 ] 下面參考說明書附圖描述根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置。
[0072]一種網(wǎng)頁自適應(yīng)布局裝置包括:寬度調(diào)整模塊,寬度調(diào)整模塊用于將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個手機(jī)屏幕的寬度;字體調(diào)整模塊,字體調(diào)整模塊用于將web網(wǎng)頁的字體大小修改為適應(yīng)多個手機(jī)屏幕的字體大?。灰约盎瑒幽K,滑動模塊用于使得web網(wǎng)頁上不同的分塊可以滑動。
[0073]圖4為本發(fā)明一個實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置的結(jié)構(gòu)示意圖。
[0074]如圖4所示,根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置,包括:寬度調(diào)整模塊110、字體調(diào)整模塊120以及滑動模塊130。
[0075]具體地,寬度調(diào)整模塊110用于將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個手機(jī)屏幕的寬度;字體調(diào)整模塊120用于將web網(wǎng)頁的字體大小修改為適應(yīng)多個手機(jī)屏幕的字體大?。灰约盎瑒幽K130用于使得web網(wǎng)頁上不同的分塊可以滑動。
[0076]在本發(fā)明的一個實(shí)施例中,寬度調(diào)整模塊110用戶將web網(wǎng)頁中以**px為單位的寬度按照預(yù)定規(guī)則替換成**%或替換成自動寬度。
[0077]在本發(fā)明的一個實(shí)施 例中,字體調(diào)整模塊120用于刪除web網(wǎng)頁中“font_size:**px” ;然后計算web網(wǎng)頁的基準(zhǔn)大小并將基準(zhǔn)大小設(shè)置在body中;最后將Web網(wǎng)頁的其余部分的大小通過“;1^0111:-8丨26:**6111”進(jìn)行修改。
[0078]在本發(fā)明的一個實(shí)施例中,滑動模塊130用于對web網(wǎng)頁上不同的分塊加上float屬性;然后刪除固定位置信息。
[0079]下面結(jié)合本發(fā)明的實(shí)施例舉例說明網(wǎng)頁自適應(yīng)布局裝置的工作流程。
[0080]例如,一個web網(wǎng)頁先通過寬度調(diào)整模塊110對head元素中可視區(qū)域的meta標(biāo)簽〈meta name=" viewport" content=" width=device-width, initial-scale=l" /> 進(jìn)行設(shè)置,將width設(shè)定為device-width,則將網(wǎng)頁的寬度被設(shè)置為設(shè)備的屏幕寬度,然后設(shè)定initial-SCale=l,即縮放比例設(shè)置為一,使網(wǎng)頁初始化能夠按照屏幕的寬度大小初始化,而不會以放大或是縮小比例的屏幕寬度初始化。然后將網(wǎng)頁中的寬度固定大小**px設(shè)定按照預(yù)定的規(guī)則替換成**%或者直接修改為自動寬度。然后通過字體調(diào)整模塊120將web網(wǎng)頁中的字體樣式中設(shè)定的固定字體大小“font-size:**pX”給刪除,再通過基于統(tǒng)計的方法將web網(wǎng)頁的基準(zhǔn)大小計算出來,然后將這個大小設(shè)置在網(wǎng)頁的正體body內(nèi),其他部分的字體大小通過設(shè)定字體大小“font_size:**em”來設(shè)定,em單位代表基準(zhǔn)大小的同等大小,則字體大小為基準(zhǔn)大小的相對單位大小。最后通過滑動模塊130在css樣式中給web頁面中不同的模塊加上浮動float屬性,然后再分塊屬性只能怪刪除固定的位置設(shè)定的信息,讓各個分塊可以按照根據(jù)頁面大小不同進(jìn)行滑動形成流式布局。
[0081]在本發(fā)明的一個實(shí)施例中,多個移動終端屏幕的寬度包括小于等于320px,320-480px, 480-800px,大于等于 800px。
[0082]根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置,通過寬度調(diào)整模塊字體調(diào)整模塊以及滑動模塊使網(wǎng)頁布局能夠自動適應(yīng)移動終端的大小,使得網(wǎng)頁能夠自動適應(yīng)不同移動設(shè)備的屏幕而改變布局,提高了網(wǎng)頁的可瀏覽性且提升了用戶的體驗(yàn)感。
[0083]圖5為本發(fā)明另一個實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置的結(jié)構(gòu)示意圖。
[0084]如圖5所示,根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置,包括:寬度調(diào)整模塊110、字體調(diào)整模塊120、滑動模塊130以及加載模塊140。
[0085]具體地,寬度調(diào)整模塊110用于將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個手機(jī)屏幕的寬度;字體調(diào)整模塊120用于將web網(wǎng)頁的字體大小修改為適應(yīng)多個手機(jī)屏幕的字體大?。灰约盎瑒幽K130用于使得web網(wǎng)頁上不同的分塊可以滑動;加載模塊140用于根據(jù)多個移動終端屏幕的大小加載不同的css文件。。
[0086]更具體地,加載模塊140用于在web中添加多種css樣式文件,web頁面在移動終端中初始化時,根據(jù)移動終端屏幕的大小不同而加載相對應(yīng)的CSS樣式文件。
[0087]在本發(fā)明的一個實(shí)施例中,寬度調(diào)整模塊110用戶將web網(wǎng)頁中以**px為單位的寬度按照預(yù)定規(guī)則替換成**%或替換成自動寬度。
[0088]在本發(fā)明的一個實(shí)施例中,字體調(diào)整模塊120用于刪除web網(wǎng)頁中“font-size:**px” ;然后計算web網(wǎng)頁的基準(zhǔn)大小并將基準(zhǔn)大小設(shè)置在body中;最后將web網(wǎng)頁的其余部分的大小通過“font-size進(jìn)行修改。
[0089]在本發(fā)明的一個實(shí)施例中,滑動模塊130用于對web網(wǎng)頁上不同的分塊加上float屬性;然后刪除固定位置信息。
[0090]下面結(jié)合本發(fā)明的實(shí)施例舉例說明網(wǎng)頁自適應(yīng)布局裝置的工作流程。
[0091 ] 例如,一個web網(wǎng)頁先通過寬度調(diào)整模塊110對head元素中可視區(qū)域的meta標(biāo)簽〈meta name=" viewport" content=" width=device-width, initial-scale=l" /> 進(jìn)行設(shè)置,將width設(shè)定為device-width,則將網(wǎng)頁的寬度被設(shè)置為設(shè)備的屏幕寬度,然后設(shè)定initial-SCale=l,即縮放比例設(shè)置為一,使網(wǎng)頁初始化能夠按照屏幕的寬度大小初始化,而不會以放大或是縮小比例的屏幕寬度初始化。然后將網(wǎng)頁中的寬度固定大小**px設(shè)定按照預(yù)定的規(guī)則替換成**%或者直接修改為自動寬度。然后通過字體調(diào)整模塊120將web網(wǎng)頁中的字體樣式中設(shè)定的固定字體大小“font-size:**pX”給刪除,再通過基于統(tǒng)計的方法將web網(wǎng)頁的基準(zhǔn)大小計算出來,然后將這個大小設(shè)置在網(wǎng)頁的正體body內(nèi),其他部分的字體大小通過設(shè)定字體大小“font-size來設(shè)定,em單位代表基準(zhǔn)大小的同等大小,則字體大小為基準(zhǔn)大小的相對單位大小。最后通過滑動模塊130在css樣式中給web頁面中不同的模塊加上浮動float屬性,然后再分塊屬性只能怪刪除固定的位置設(shè)定的信息,讓各個分塊可以按照根據(jù)頁面大小不同進(jìn)行滑動形成流式布局。然后在網(wǎng)頁在移動終端上初始化時,通過加載模塊140來根據(jù)移動終端的屏幕大小的不一樣來選擇加載不同的css樣式文件,將網(wǎng)頁以不同的樣式布局在不同的移動終端中展示。
[0092]在本發(fā)明的一個實(shí)施例中,多個移動終端屏幕的寬度包括小于等于320px,320-480px, 480-800px,大于等于800px。根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置,
[0093]根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法,通過加載模塊在頁面初始化時加載不同CSS樣式文件來改變布局展現(xiàn),讓頁面能夠適應(yīng)不同移動終端的屏幕,提高了網(wǎng)頁的可瀏覽性以及提升用戶的體驗(yàn)感。
[0094]圖6為本發(fā)明另一個實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置的結(jié)構(gòu)示意圖。
[0095]如圖6所示,根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置,包括:寬度調(diào)整模塊110、字體調(diào)整模塊120、滑動模塊130、加載模塊140以及設(shè)置模塊150。
[0096]具體地,寬度調(diào)整模塊110用于將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個手機(jī)屏幕的寬度;字體調(diào)整模塊120用于將web網(wǎng)頁的字體大小修改為適應(yīng)多個手機(jī)屏幕的字體大小;以及滑動模塊130用于使得web網(wǎng)頁上不同的分塊可以滑動;加載模塊140用于根據(jù)多個移動終端屏幕的大小加載不同的css文件。設(shè)置模塊150用與在不同的css文件中設(shè)置max-width屬性以改變圖片的大小。
[0097]更具體地,加載模塊140用于在web中添加多種css樣式文件,web頁面在移動終端中初始化時,根據(jù)移動終端屏幕的大小不同而加載相對應(yīng)的CSS樣式文件。設(shè)置模塊150通過在不同的css樣式文件中設(shè)置圖片的最大寬度max-width屬性來改變圖片的顯示寬度,在加載不同的css樣式文件時,圖片顯示出不同的大小。
[0098]在本發(fā)明的一個實(shí)施例中,寬度調(diào)整模塊110用戶將web網(wǎng)頁中以**px為單位的寬度按照預(yù)定規(guī)則替換成**%或替換成自動寬度。
[0099]在本發(fā)明的一個實(shí)施例中,字體調(diào)整模塊120用于刪除web網(wǎng)頁中“font_size:**px” ;然后計算web網(wǎng)頁的基準(zhǔn)大小并將基準(zhǔn)大小設(shè)置在body中;最后將Web網(wǎng)頁的其余部分的大小通過“;1^0111:-8丨26:**6111”進(jìn)行修改。
[0100]在本發(fā)明的一個實(shí)施例中,滑動模塊130用于對web網(wǎng)頁上不同的分塊加上float屬性;然后刪除固定位置信息。
[0101]下面結(jié)合本發(fā)明的實(shí)施例舉例說明網(wǎng)頁自適應(yīng)布局裝置的工作流程。
[0102]例如,一個web網(wǎng)頁先通過寬度調(diào)整模塊110對head元素中可視區(qū)域的meta標(biāo)簽〈meta name=" viewport" content=" width=device-width, initial-scale=l" /> 進(jìn)行設(shè)置,將width設(shè)定為device-width,則將網(wǎng)頁的寬度被設(shè)置為設(shè)備的屏幕寬度,然后設(shè)定initial-SCale=l,即縮放比例設(shè)置為一,使網(wǎng)頁初始化能夠按照屏幕的寬度大小初始化,而不會以放大或是縮小比例的屏幕寬度初始化。然后將網(wǎng)頁中的寬度固定大小**px設(shè)定按照預(yù)定的規(guī)則替換成**%或者直接修改為自動寬度。然后通過字體調(diào)整模塊120將web網(wǎng)頁中的字體樣式中設(shè)定的固定字體大小“font-size:**pX”給刪除,再通過基于統(tǒng)計的方法將web網(wǎng)頁的基準(zhǔn)大小計算出來,然后將這個大小設(shè)置在網(wǎng)頁的正體body內(nèi),其他部分的字體大小通過設(shè)定字體大小“font_size:**em”來設(shè)定,em單位代表基準(zhǔn)大小的同等大小,則字體大小為基準(zhǔn)大小的相對單位大小。最后通過滑動模塊130在css樣式中給web頁面中不同的模塊加上浮動float屬性,然后再分塊屬性只能怪刪除固定的位置設(shè)定的信息,讓各個分塊可以按照根據(jù)頁面大小不同進(jìn)行滑動形成流式布局。然后在網(wǎng)頁在移動終端上初始化時,通過加載模塊140來根據(jù)移動終端的屏幕大小的不一樣來選擇加載不同的css樣式文件,將網(wǎng)頁以不同的樣式布局在不同的移動終端中展示。
[0103]在本發(fā)明的一個實(shí)施例中,多個移動終端屏幕的寬度包括小于等于320px,320-480px, 480-800px,大于等于800px。根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局裝置,
[0104]根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁自適應(yīng)布局方法,通過設(shè)置模塊150在頁面初始化時加載不同CSS樣式文件來頁面中圖片顯示的大小,讓圖片顯示能夠適應(yīng)不同移動終端的屏幕,提高了網(wǎng)頁中圖片的可瀏覽性以及提升用戶的體驗(yàn)感。
[0105]在本說明書的描述中,參考術(shù)語“一個實(shí)施例”、“一些實(shí)施例”、 “示例”、“具體示例”、或“一些示例”等的描述意指結(jié)合該實(shí)施例或示例描述的具體特征、結(jié)構(gòu)、材料或者特點(diǎn)包含于本發(fā)明的至少一個實(shí)施例或示例中。在本說明書中,對上述術(shù)語的示意性表述不一定指的是相同的實(shí)施例或示例。而且,描述的具體特征、結(jié)構(gòu)、材料或者特點(diǎn)可以在任何的一個或多個實(shí)施例或示例中以合適的方式結(jié)合。
[0106] 盡管已經(jīng)示出和描述了本發(fā)明的實(shí)施例,對于本領(lǐng)域的普通技術(shù)人員而言,可以理解在不脫離本發(fā)明的原理和精神的情況下可以對這些實(shí)施例進(jìn)行多種變化、修改、替換和變型,本發(fā)明的范圍由所附權(quán)利要求及其等同限定。
【權(quán)利要求】
1.一種網(wǎng)頁自適應(yīng)布局方法,其特征在于,包括以下步驟: 將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個移動終端屏幕的寬度; 將所述web網(wǎng)頁的字體大小修改為適應(yīng)所述多個移動終端屏幕的字體大??;以及 使得所述web網(wǎng)頁上不同的分塊可以滑動。
2.根據(jù)權(quán)利要求1所述的方法,其特征在于,進(jìn)一步包括步驟: 根據(jù)所述多個移動終端屏幕的大小加載不同的css文件。
3.根據(jù)權(quán)利要求1或2所述的方法,其特征在于,進(jìn)一步包括步驟: 在所述不同的CSS文件中設(shè)置max-width屬性以改變圖片的大小。
4.根據(jù)權(quán)利要求1至3中任一項(xiàng)所述的方法,其特征在于,所述多個移動終端屏幕的寬度包括小于等于320px, 320-480px, 480-800px,大于等于800px。
5.根據(jù)權(quán)利要求1至3中任一項(xiàng)所述的方法,其特征在于,使得所述web網(wǎng)頁上不同的分塊可以滑動的步驟包括: 對所述web網(wǎng)頁上不同的分塊加上float屬性;以及 刪除固定位置信息。
6.根據(jù)權(quán)利要求1至3中任一項(xiàng)所述的方法,其特征在于,將web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個移動終端屏幕的寬度的步驟包括: 將所述web網(wǎng)頁中以**px為`單位的寬度按照預(yù)定規(guī)則替換成**%或替換成自動寬度。
7.根據(jù)權(quán)利要求1至3中任一項(xiàng)所述的方法,其特征在于,將所述web網(wǎng)頁的字體大小修改為適應(yīng)所述多個手機(jī)屏幕的字體大小的步驟包括: 刪除所述web網(wǎng)頁中“font_size:**px” ; 計算所述web網(wǎng)頁的基準(zhǔn)大小并將所述基準(zhǔn)大小設(shè)置在body中;以及 將所述web網(wǎng)頁的其余部分的大小通過“;^0111:-8丨26:**6111”進(jìn)行修改。
8.一種網(wǎng)頁自適應(yīng)布局裝置,其特征在于,包括: 寬度調(diào)整模塊,所述寬度調(diào)整模塊用于將Web網(wǎng)頁的寬度調(diào)整為適應(yīng)多個手機(jī)屏幕的覽度; 字體調(diào)整模塊,字體調(diào)整模塊用于將所述web網(wǎng)頁的字體大小修改為適應(yīng)所述多個手機(jī)屏幕的字體大??;以及 滑動模塊,所述滑動模塊用于使得所述web網(wǎng)頁上不同的分塊可以滑動。
9.根據(jù)權(quán)利要求8所述的裝置,其特征在于,進(jìn)一步包括: 加載模塊,所述加載模塊用于根據(jù)所述多個移動終端屏幕的大小加載不同的CSS文件。
10.根據(jù)權(quán)利要求8或9所述的裝置,其特征在于,進(jìn)一步包括: 設(shè)置模塊,所述設(shè)置模塊用于在所述不同的CSS文件中設(shè)置max-width屬性以改變圖片的大小。
11.根據(jù)權(quán)利要求8至10中任一項(xiàng)所述的裝置,其特征在于,所述多個手機(jī)屏幕的寬度包括小于等于 320px,320-480px, 480_800px,大于等于 800px。
12.根據(jù)權(quán)利要求8至10中任一項(xiàng)所述的裝置,其特征在于,所述滑動模塊用于: 對所述web網(wǎng)頁上不同的分塊加上float屬性;以及 刪除固定位置信息。
13.根據(jù)權(quán)利要求8至10中任一項(xiàng)所述的裝置,其特征在于,所述寬度調(diào)整模塊用于:將所述web網(wǎng)頁中以**px為單位的寬度按照預(yù)定規(guī)則替換成**%或替換成自動寬度。
14.根據(jù)權(quán)利要求8至10中任一項(xiàng)所述的裝置,其特征在于,所述字體調(diào)整模塊用于:刪除所述web網(wǎng)頁中“font_size:**px” ;計算所述web網(wǎng)頁的基準(zhǔn)大小并將所述基準(zhǔn)大小設(shè)置在body中;以及將所述web網(wǎng)頁的其余部分的`大小通過“;^0111:-8丨26:**6111”進(jìn)行修改。
【文檔編號】G06F9/44GK103513979SQ201210227113
【公開日】2014年1月15日 申請日期:2012年6月29日 優(yōu)先權(quán)日:2012年6月29日
【發(fā)明者】劉承誠, 王智杰, 王倩 申請人:百度在線網(wǎng)絡(luò)技術(shù)(北京)有限公司