頁(yè)面布局自適應(yīng)方法及裝置制造方法
【專利摘要】本發(fā)明公開(kāi)一種頁(yè)面布局自適應(yīng)方法及裝置，本發(fā)明實(shí)施例插入用于調(diào)整頁(yè)面布局的程序代碼；基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度；根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示；具有不需要重新設(shè)計(jì)修改網(wǎng)頁(yè)即可使網(wǎng)頁(yè)頁(yè)面自適應(yīng)移動(dòng)終端顯示屏幕的有益效果，且絲毫不影響原始網(wǎng)頁(yè)的顯示效果，提高了人機(jī)的可交互性；另外，由于僅需要插入對(duì)應(yīng)的JS代碼即可實(shí)現(xiàn)，節(jié)約了大量的人力；同時(shí)，若需要更改對(duì)應(yīng)的視覺(jué)效果只需更改對(duì)應(yīng)地代碼即可，成本較低且便于后期的維護(hù)和升級(jí)。
【專利說(shuō)明】頁(yè)面布局自適應(yīng)方法及裝置
【技術(shù)領(lǐng)域】
[0001 ] 本發(fā)明涉及網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，尤其涉及一種頁(yè)面布局自適應(yīng)方法及裝置。
【背景技術(shù)】
[0002]鑒于移動(dòng)終端的便攜性，用戶可以使用移動(dòng)終端隨時(shí)隨地訪問(wèn)網(wǎng)頁(yè)；受限于移動(dòng)終端的屏幕尺寸，原始設(shè)計(jì)出的網(wǎng)頁(yè)頁(yè)面在移動(dòng)終端上顯示時(shí)的布局與在PC這類終端上顯示時(shí)的布局有很大不同；而針對(duì)每種尺寸的移動(dòng)終端均重新設(shè)計(jì)網(wǎng)頁(yè)是很不現(xiàn)實(shí)的，因?yàn)橐苿?dòng)終端的尺寸有多種且原始網(wǎng)頁(yè)的數(shù)量也很龐大；由此，網(wǎng)頁(yè)頁(yè)面能夠根據(jù)移動(dòng)終端的顯示尺寸自適應(yīng)地布局頁(yè)面上的元素便顯得尤其重要。
[0003]目前，某些網(wǎng)站提供了將原始網(wǎng)頁(yè)轉(zhuǎn)換為手機(jī)版或者觸屏版的工具，利用該轉(zhuǎn)換工具可以快速的把一個(gè)網(wǎng)頁(yè)移動(dòng)化，但這種方式能生成的模板格式有限，通常都是“導(dǎo)航+文章列表”的格式，丟失了原網(wǎng)頁(yè)很多元素，包括背景、顏色、形象、圖標(biāo)、LOGO (商標(biāo))、內(nèi)容、廣告等，跟原網(wǎng)頁(yè)風(fēng)格幾乎完全不同，只有文字和少量圖片，而且也不支持JS(JavaSCript，程序語(yǔ)言)等動(dòng)態(tài)效果，比如下拉菜單、彈出菜單等，原網(wǎng)站的廣告內(nèi)容也基本上被去掉了。
【發(fā)明內(nèi)容】
[0004]鑒于此，有必要提供一種頁(yè)面布局自適應(yīng)方法及裝置，以使網(wǎng)頁(yè)頁(yè)面能夠根據(jù)移動(dòng)終端自適應(yīng)地布局頁(yè)面元素。
[0005]本發(fā)明實(shí)施例公開(kāi)了一種頁(yè)面布局自適應(yīng)方法，包括以下步驟:
[0006]插入用于調(diào)整頁(yè)面布局的程序代碼；
[0007]基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度；
[0008]根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；
[0009]根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示。
[0010]優(yōu)選地，所述插入用于調(diào)整頁(yè)面布局的程序代碼的步驟之后、獲取移動(dòng)終端的屏幕顯示寬度的步驟之前，還包括:
[0011]基于插入的所述程序代碼，獲取終端的類型，識(shí)別該終端是否為移動(dòng)終端；
[0012]在該終端為移動(dòng)終端時(shí)，執(zhí)行所述步驟:
[0013]基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度。
[0014]優(yōu)選地，所述根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度，包括:
[0015]根據(jù)獲取的屏幕顯示寬度，將網(wǎng)頁(yè)的頁(yè)面顯示寬度調(diào)整為與所述屏幕顯示寬度相一致的顯示尺寸。
[0016]優(yōu)選地，所述調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，包括:
[0017]將某一元素的顯示寬度調(diào)整為該元素對(duì)應(yīng)的父元素的最大顯示寬度。
[0018]優(yōu)選地，所述獲取移動(dòng)終端的屏幕顯示寬度包括:[0019]獲取移動(dòng)終端的屏幕分辨率；
[0020]根據(jù)獲取的所述屏幕分辨率，獲取所述屏幕顯示寬度。
[0021]本發(fā)明實(shí)施例還公開(kāi)一種頁(yè)面布局自適應(yīng)裝置，包括:
[0022]代碼插入模塊，用于插入用于調(diào)整頁(yè)面布局的程序代碼；
[0023]參數(shù)獲取模塊，用于基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度；
[0024]布局調(diào)整模塊，用于根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示。
[0025]優(yōu)選地，所述頁(yè)面布局自適應(yīng)裝置還包括:
[0026]類型識(shí)別模塊，用于基于插入的所述程序代碼，獲取終端的類型，識(shí)別該終端是否為移動(dòng)終端。
[0027]優(yōu)選地，所述布局調(diào)整模塊還用于:
[0028]根據(jù)獲取的屏幕顯示寬度，將網(wǎng)頁(yè)的頁(yè)面顯示寬度調(diào)整為與所述屏幕顯示寬度相一致的顯示尺寸。
[0029]優(yōu)選地，所述布局調(diào)整模塊還用于:
[0030]將某一元素的顯示寬度調(diào)整為該元素對(duì)應(yīng)的父元素的最大顯示寬度。
[0031]優(yōu)選地，所述參數(shù)獲取模塊還用于:
[0032]獲取移動(dòng)終端的屏幕分辨率；
[0033]根據(jù)獲取的所述屏幕分辨率，獲取所述屏幕顯示寬度。
[0034]本發(fā)明實(shí)施例獲取移動(dòng)終端的屏幕顯示寬度；根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示；相較于現(xiàn)有技術(shù)中，特地針對(duì)移動(dòng)終端設(shè)計(jì)網(wǎng)頁(yè)，或者利用轉(zhuǎn)換工具統(tǒng)一轉(zhuǎn)換各種類型的網(wǎng)頁(yè)的方法，本發(fā)明實(shí)施例具有不需要重新設(shè)計(jì)修改網(wǎng)頁(yè)即可使網(wǎng)頁(yè)頁(yè)面自適應(yīng)移動(dòng)終端顯示屏幕的有益效果，且絲毫不影響原始網(wǎng)頁(yè)的顯示效果。
【專利附圖】
【附圖說(shuō)明】
[0035]圖1是本發(fā)明頁(yè)面布局自適應(yīng)方法第一實(shí)施例流程示意圖；
[0036]圖2是本發(fā)明頁(yè)面布局自適應(yīng)方法第二實(shí)施例流程示意圖；
[0037]圖3是本發(fā)明頁(yè)面布局自適應(yīng)裝置第一實(shí)施例功能模塊示意圖；
[0038]圖4是本發(fā)明頁(yè)面布局自適應(yīng)裝置第二實(shí)施例功能模塊示意圖。
[0039]本發(fā)明實(shí)施例目的的實(shí)現(xiàn)、功能特點(diǎn)及優(yōu)點(diǎn)將結(jié)合實(shí)施例，參照附圖做進(jìn)一步說(shuō)明。
【具體實(shí)施方式】
[0040]以下結(jié)合說(shuō)明書附圖及具體實(shí)施例進(jìn)一步說(shuō)明本發(fā)明的技術(shù)方案。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0041 ] 圖1是本發(fā)明頁(yè)面布局自適應(yīng)方法第一實(shí)施例流程示意圖；如圖1所示，本發(fā)明頁(yè)面布局自適應(yīng)方法包括以下步驟:[0042]步驟SO1、插入用于調(diào)整頁(yè)面布局的JS代碼；
[0043]本發(fā)明實(shí)施例中，頁(yè)面布局自適應(yīng)方法是通過(guò)部署的JS代碼實(shí)現(xiàn)的。在具體的應(yīng)用場(chǎng)景中，承載JS代碼的設(shè)備如頁(yè)面布局自適應(yīng)裝置可以部署在終端和服務(wù)器之間；承載JS代碼的設(shè)備首先對(duì)http協(xié)議做代理，然后，對(duì)所需要在移動(dòng)終端上顯示的網(wǎng)頁(yè)進(jìn)行重組，且在該網(wǎng)頁(yè)處于壓縮狀態(tài)時(shí)，對(duì)該網(wǎng)頁(yè)進(jìn)行解壓；然后，在html頁(yè)面的合適位置插入一段JS代碼腳本，這里所述的合適位置指的是，插入的JS代碼只要不打亂重組后該網(wǎng)頁(yè)對(duì)應(yīng)的鏈接地址即可；在一優(yōu)選的方案中，可以將該JS代碼插入網(wǎng)頁(yè)地址的尾部，這樣不影響該網(wǎng)頁(yè)的加載速度。在網(wǎng)頁(yè)加載完成后，插入的JS代碼基于終端上的瀏覽器被終端調(diào)用并開(kāi)始運(yùn)行。JS代碼在終端上運(yùn)行，使加載的網(wǎng)頁(yè)能夠自適應(yīng)終端的顯示屏幕。 [0044]步驟S02、基于插入的JS代碼，獲取移動(dòng)終端的屏幕顯示寬度；
[0045]本實(shí)施例中，由移動(dòng)終端上運(yùn)行的JS代碼來(lái)獲取移動(dòng)終端的屏幕顯示寬度；移動(dòng)終端上運(yùn)行的JS代碼獲取該移動(dòng)終端的屏幕顯示寬度可以通過(guò)以下方式實(shí)現(xiàn):獲取移動(dòng)終端的型號(hào)，根據(jù)移動(dòng)終端的型號(hào)查找數(shù)據(jù)庫(kù)，調(diào)用與該型號(hào)對(duì)應(yīng)的該移動(dòng)終端的屏幕顯示寬度；或者，獲取移動(dòng)終端的屏幕分辨率，根據(jù)獲取的移動(dòng)終端的屏幕分辯率，獲取移動(dòng)終端的屏幕顯示寬度；或者，直接讀取該移動(dòng)終端所使用的顯示屏的規(guī)格參數(shù)，獲取該移動(dòng)終端的屏幕顯示寬度等。
[0046]步驟S03、根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；
[0047]插入的JS代碼獲取到移動(dòng)終端的屏幕顯示寬度后，根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)的比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度。該預(yù)設(shè)比例可以根據(jù)加載該網(wǎng)頁(yè)的瀏覽器的類型以及獲取的移動(dòng)終端屏幕顯示寬度確定，或者根據(jù)加載該網(wǎng)頁(yè)的瀏覽器的類型及移動(dòng)終端的分辨率來(lái)確定；或者，在獲取移動(dòng)終端的相應(yīng)參數(shù)之前，在插入的JS代碼中直接設(shè)定該預(yù)設(shè)比例。
[0048]在一優(yōu)選的實(shí)施例中，設(shè)置該預(yù)設(shè)比例為1.0,即設(shè)置網(wǎng)頁(yè)頁(yè)面的顯示寬度為獲取的該移動(dòng)終端的屏幕顯示寬度，也可以理解為:根據(jù)獲取的屏幕顯示寬度，將網(wǎng)頁(yè)的頁(yè)面顯示寬度調(diào)整為與所述屏幕顯示寬度相一致的顯示尺寸。在具體的應(yīng)用場(chǎng)景中，可以在網(wǎng)頁(yè)地址的頭部增加自適應(yīng)的meta (元標(biāo)簽),如在網(wǎng)頁(yè)代碼的頭部,加入一行viewport (視口)元標(biāo)簽，可以用下述代碼實(shí)現(xiàn):
[0049]〈meta name=〃viewport〃content=〃width=device_width，initial-scale=l〃/> ；
[0050]viewport表示網(wǎng)頁(yè)默認(rèn)的寬度和高度，“width=device_width”表示網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度，“initial-scaled”表示縮放比例為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。目前所有主流瀏覽器都支持上述設(shè)置，包括IE9。對(duì)于一些IE6、IE7、IE8等瀏覽器可以使用css3_mediaqueries.js來(lái)實(shí)現(xiàn):
[0051]
<!-[ifltIE9]>
〈script
src=!'http://css3-mediaquenes-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]->0[0052] 步驟S04、根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示。
[0053]根據(jù)獲取的移動(dòng)終端的頁(yè)面顯示寬度，插入該移動(dòng)終端的JS代碼調(diào)整組成該網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度和顯示位置；本實(shí)施例中，由于網(wǎng)頁(yè)頁(yè)面的顯示寬度會(huì)根據(jù)移動(dòng)終端的屏幕寬度來(lái)調(diào)整各元素的布局，因此設(shè)置各元素的寬度為相對(duì)于該網(wǎng)頁(yè)頁(yè)面寬度的相對(duì)寬度，而不使用各元素的絕對(duì)寬度進(jìn)行布局，比如僅設(shè)置各元素相對(duì)于網(wǎng)頁(yè)頁(yè)面寬度的百分比寬度。本實(shí)施例中，插入移動(dòng)終端的JS代碼調(diào)整網(wǎng)頁(yè)頁(yè)面的字體、圖片、視頻等的大小也均采用相對(duì)大??；例如，設(shè)置網(wǎng)頁(yè)頁(yè)面的字體大小、圖片大小和視頻所占用的區(qū)域大小均為相對(duì)于網(wǎng)頁(yè)頁(yè)面寬度的百分比寬度。
[0054]插入該移動(dòng)終端的JS代碼設(shè)置各元素的顯示位置為浮動(dòng)顯示，即各元素的顯示位置不是固定不變的；比如，如果該網(wǎng)頁(yè)頁(yè)面的顯示寬度較小，不能同時(shí)容置下兩個(gè)元素，則后面的那個(gè)元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，而不會(huì)在水平方向上溢出，從而很好地避免了水平滾動(dòng)條的出現(xiàn)，方便用戶查看，有利于提高用戶的使用滿意度。
[0055]在一優(yōu)選的實(shí)施例中，設(shè)定組成網(wǎng)頁(yè)頁(yè)面的部分元素的寬度為該元素對(duì)應(yīng)的父元素的最大寬度，防止溢出；也可以將組成網(wǎng)頁(yè)頁(yè)面的所有元素所占用的寬度均設(shè)置為各元素對(duì)應(yīng)的父元素的最大寬度。
[0056]采用上述設(shè)置方式，在JS代碼的作用下，各網(wǎng)頁(yè)均能夠根據(jù)移動(dòng)終端的屏幕顯示寬度自適應(yīng)布局組成該網(wǎng)頁(yè)的元素，根本不需要重新設(shè)計(jì)修改原始已設(shè)計(jì)好的網(wǎng)頁(yè)，省去了大量的人力成本；同時(shí)，原網(wǎng)站的風(fēng)格、配色、顯示元素、內(nèi)容等，以及原網(wǎng)站的各種動(dòng)態(tài)效果包括下拉菜單、圖片輪播、插入的動(dòng)態(tài)廣告欄等效果均得以保留，使得用戶能夠在移動(dòng)終端上享受與其他終端同樣的視覺(jué)體驗(yàn)。
[0057]本發(fā)明實(shí)施例插入用于調(diào)整頁(yè)面布局的程序代碼；基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度；根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示；相較于現(xiàn)有技術(shù)中，特地針對(duì)移動(dòng)終端設(shè)計(jì)網(wǎng)頁(yè)，或者利用轉(zhuǎn)換工具統(tǒng)一轉(zhuǎn)換各種類型的網(wǎng)頁(yè)的方法，本發(fā)明實(shí)施例具有不需要重新設(shè)計(jì)修改網(wǎng)頁(yè)即可使網(wǎng)頁(yè)頁(yè)面自適應(yīng)移動(dòng)終端顯示屏幕的有益效果，且絲毫不影響原始網(wǎng)頁(yè)的顯示效果，提高了人機(jī)的可交互性；另外，由于僅需要插入對(duì)應(yīng)的JS代碼即可實(shí)現(xiàn)，節(jié)約了大量的人力；同時(shí)，若需要更改對(duì)應(yīng)的視覺(jué)效果只需更改對(duì)應(yīng)地代碼即可，成本較低且便于后期的維護(hù)和升級(jí)。
[0058]圖2是本發(fā)明頁(yè)面布局自適應(yīng)方法第二實(shí)施例流程示意圖；本實(shí)施例與圖1所述實(shí)施例的區(qū)別是，增加了步驟Sll ;本實(shí)施例僅對(duì)步驟Sll進(jìn)行具體描述，有關(guān)本發(fā)明頁(yè)面布局自適應(yīng)方法所涉及的其他步驟請(qǐng)參照相關(guān)實(shí)施例的具體描述，在此不再贅述。
[0059]如圖2所示，本發(fā)明頁(yè)面布局自適應(yīng)方法在步驟SO1、插入用于調(diào)整頁(yè)面布局的JS代碼的步驟之后，步驟S02、基于插入的JS代碼，獲取移動(dòng)終端的屏幕顯示寬度之前，還包括:
[0060]步驟S11、基于插入的JS代碼，獲取終端的類型，識(shí)別該終端是否為移動(dòng)終端；[0061 ] 在該終〗而為移動(dòng)終〗而時(shí)，執(zhí)彳了步驟S02:
[0062]基于插入的JS代碼，獲取移動(dòng)終端的屏幕顯示寬度。[0063]本實(shí)施例中，在網(wǎng)頁(yè)加載完成后，插入的JS代碼基于終端上的瀏覽器被終端調(diào)用并開(kāi)始運(yùn)行時(shí)，JS代碼首先獲取終端的類型，并識(shí)別該JS代碼當(dāng)前所運(yùn)行的環(huán)境即該終端是否為移動(dòng)終端；若JS代碼識(shí)別出該終端不是移動(dòng)終端，則停止運(yùn)行，不進(jìn)行后的網(wǎng)頁(yè)自適應(yīng)的流程；因?yàn)椋季W(wǎng)頁(yè)在一開(kāi)始設(shè)計(jì)的時(shí)候，智能移動(dòng)終端尚未問(wèn)世，因此設(shè)計(jì)的原始網(wǎng)頁(yè)通常是針對(duì)終端如PC機(jī)進(jìn)行設(shè)計(jì)的，所以加載的網(wǎng)頁(yè)當(dāng)然適應(yīng)除移動(dòng)終端之外的終端，所以，再執(zhí)行后續(xù)的網(wǎng)頁(yè)自適應(yīng)過(guò)程是沒(méi)有意義的。
[0064]本發(fā)明實(shí)施例基于插入的程序代碼，識(shí)別終端是否為移動(dòng)終端，并在該終端為移動(dòng)終端的情況下，再執(zhí)行頁(yè)面自適應(yīng)程序，避免了不必要的代碼運(yùn)行所引起的系統(tǒng)資源的消耗。
[0065]當(dāng)然，在某種情況下，比如設(shè)計(jì)的該網(wǎng)頁(yè)針對(duì)某一瀏覽器類型如瀏覽器A設(shè)置的，終端上正在加載該網(wǎng)頁(yè)的瀏覽器類型如瀏覽器B顯示該網(wǎng)頁(yè)的效果，比利用瀏覽器A顯示該網(wǎng)頁(yè)的效果稍差，則JS代碼也可以根據(jù)瀏覽器B的類型使該網(wǎng)頁(yè)的布局自適應(yīng)該瀏覽器B ;或者，某網(wǎng)頁(yè)針對(duì)移動(dòng)終端設(shè)計(jì)的，當(dāng)PC機(jī)這類非移動(dòng)終端加載該網(wǎng)頁(yè)時(shí)，JS代碼也可以使該網(wǎng)頁(yè)的布局自適應(yīng)PC機(jī)；或者其他類似情形。上述情形均包括在本發(fā)明的思想之內(nèi)。
[0066]圖3是本發(fā)明頁(yè)面布局自適應(yīng)裝置第一實(shí)施例功能模塊示意圖；如圖3所示，本發(fā)明頁(yè)面布局自適應(yīng)裝置包括:代碼插入模塊01、參數(shù)獲取模塊02和布局調(diào)整模塊03。
[0067]代碼插入模塊01，用于插入用于調(diào)整頁(yè)面布局的程序代碼；
[0068]本發(fā)明實(shí)施例中，頁(yè)面布局自適應(yīng)裝置是通過(guò)代碼插入模塊01插入已部署的JS代碼實(shí)現(xiàn)的。在具體的應(yīng)用場(chǎng)景中，承載JS代碼的設(shè)備如頁(yè)面布局自適應(yīng)裝置可以部署在終端和服務(wù)器之間；承載JS代碼的設(shè)備首先對(duì)http協(xié)議做代理，然后，對(duì)所需要在移動(dòng)終端上顯示的網(wǎng)頁(yè)進(jìn)行重組，且在該網(wǎng)頁(yè)處于壓縮狀態(tài)時(shí)，對(duì)該網(wǎng)頁(yè)進(jìn)行解壓；然后，代碼插入模塊01在html頁(yè)面的合適位置插入一段JS代碼腳本，這里所述的合適位置指的是，代碼插入模塊01插入的JS代碼只要不打亂重組后該網(wǎng)頁(yè)對(duì)應(yīng)的鏈接地址即可；在一優(yōu)選的方案中，代碼插入模塊01可以將該JS代碼插入網(wǎng)頁(yè)地址的尾部，這樣不影響該網(wǎng)頁(yè)的加載速度。在網(wǎng)頁(yè)加載完成后，代碼插入模塊01插入的JS代碼基于終端上的瀏覽器被終端調(diào)用并開(kāi)始運(yùn)行。JS代碼在終端上運(yùn)行，使加載的網(wǎng)頁(yè)能夠自適應(yīng)終端的顯示屏幕。
[0069]參數(shù)獲取模塊02，用于基于插入的JS代碼，獲取移動(dòng)終端的屏幕顯示寬度；
[0070]本實(shí)施例中，參數(shù)獲取模塊02來(lái)獲取移動(dòng)終端的屏幕顯示寬度；參數(shù)獲取模塊02獲取該移動(dòng)終端的屏幕顯示寬度可以通過(guò)以下方式實(shí)現(xiàn):獲取移動(dòng)終端的型號(hào)，根據(jù)移動(dòng)終端的型號(hào)查找數(shù)據(jù)庫(kù)，調(diào)用與該型號(hào)對(duì)應(yīng)的該移動(dòng)終端的屏幕顯示寬度；或者，獲取移動(dòng)終端的屏幕分辨率，根據(jù)獲取的移動(dòng)終端的屏幕分辯率，獲取移動(dòng)終端的屏幕顯示寬度；或者，直接讀取該移動(dòng)終端所使用的顯示屏的規(guī)格參數(shù)，獲取該移動(dòng)終端的屏幕顯示寬度等。
[0071]布局調(diào)整模塊03，用于根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示。
[0072]參數(shù)獲取模塊02獲取到移動(dòng)終端的屏幕顯示寬度后，布局調(diào)整模塊03根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)的比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度。該預(yù)設(shè)比例可以根據(jù)加載該網(wǎng)頁(yè)的瀏覽器的類型以及獲取的移動(dòng)終端屏幕顯示寬度確定，或者根據(jù)加載該網(wǎng)頁(yè)的瀏覽器的類型及移動(dòng)終端的分辨率來(lái)確定；或者，在獲取移動(dòng)終端的相應(yīng)參數(shù)之前，在插入的JS代碼中直接設(shè)定該預(yù)設(shè)比例。
[0073]在一優(yōu)選的實(shí)施例中，布局調(diào)整模塊03設(shè)置該預(yù)設(shè)比例為1.0,即設(shè)置網(wǎng)頁(yè)頁(yè)面的顯示寬度為獲取的該移動(dòng)終端的屏幕顯示寬度，也可以理解為:根據(jù)獲取的屏幕顯示寬度，布局調(diào)整模塊03將網(wǎng)頁(yè)的頁(yè)面顯示寬度調(diào)整為與所述屏幕顯示寬度相一致的顯示尺寸。在具體的應(yīng)用場(chǎng)景中，可以在網(wǎng)頁(yè)地址的頭部增加自適應(yīng)的meta (元標(biāo)簽)，如在網(wǎng)頁(yè)代碼的頭部，加入一行viewport (視口)元標(biāo)簽，可以用下述代碼實(shí)現(xiàn):
[0074]〈meta name=〃viewport〃content=〃width=device_width，initial-scale=l〃/> ；
[0075]viewport表示網(wǎng)頁(yè)默認(rèn)的寬度和高度，“width=device_width”表示網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度，“initial-scaled”表示縮放比例為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。目前所有主流瀏覽器都支持上述設(shè)置，包括IE9。對(duì)于一些IE6、IE7、IE8等瀏覽器可以使用css3_mediaqueries.js來(lái)實(shí)現(xiàn):
[0076]
<!-[iflt IE9]>
<script
src="http://css3-1nediaqueries-js.googlecode.com/svn/trunk/css3-1nediaqueries.js">
[0077]
</script>
<![endif]-->。
[0078]布局調(diào)整模塊03根據(jù)獲取的移動(dòng)終端的頁(yè)面顯示寬度，調(diào)整組成該網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度和顯示位置；本實(shí)施例中，由于網(wǎng)頁(yè)頁(yè)面的顯示寬度會(huì)根據(jù)移動(dòng)終端的屏幕寬度來(lái)調(diào)整各元素的布局，因此布局調(diào)整模塊03設(shè)置各元素的寬度為相對(duì)于該網(wǎng)頁(yè)頁(yè)面寬度的相對(duì)寬度，而不使用各元素的絕對(duì)寬度進(jìn)行布局，比如僅設(shè)置各元素相對(duì)于網(wǎng)頁(yè)頁(yè)面寬度的百分比寬度。本實(shí)施例中，布局調(diào)整模塊03插入移動(dòng)終端的JS代碼調(diào)整網(wǎng)頁(yè)頁(yè)面的字體、圖片、視頻等的大小也均采用相對(duì)大??；例如，布局調(diào)整模塊03設(shè)置網(wǎng)頁(yè)頁(yè)面的字體大小、圖片大小和視頻所占用的區(qū)域大小均為相對(duì)于網(wǎng)頁(yè)頁(yè)面寬度的百分比寬度。
[0079]布局調(diào)整模塊03設(shè)置各元素的顯示位置為浮動(dòng)顯示，即各元素的顯示位置不是固定不變的；比如，如果該網(wǎng)頁(yè)頁(yè)面的顯示寬度較小，不能同時(shí)容置下兩個(gè)元素，則后面的那個(gè)元素會(huì)通過(guò)布局調(diào)整模塊03的調(diào)整自動(dòng)滾動(dòng)到前面元素的下方，而不會(huì)在水平方向上溢出，從而很好地避免了水平滾動(dòng)條的出現(xiàn)，方便用戶查看，有利于提高用戶的使用滿意度。
[0080]在一優(yōu)選的實(shí)施例中，布局調(diào)整模塊03設(shè)定組成網(wǎng)頁(yè)頁(yè)面的部分元素的寬度為該元素對(duì)應(yīng)的父元素的最大寬度，防止溢出；布局調(diào)整模塊03也可以將組成網(wǎng)頁(yè)頁(yè)面的所有元素所占用的寬度均設(shè)置為各元素對(duì)應(yīng)的父元素的最大寬度。
[0081]采用上述設(shè)置方式，各網(wǎng)頁(yè)均能夠根據(jù)移動(dòng)終端的屏幕顯示寬度自適應(yīng)布局組成該網(wǎng)頁(yè)的元素，根本不需要重新設(shè)計(jì)修改原始已設(shè)計(jì)好的網(wǎng)頁(yè)，省去了大量的人力成本；同時(shí)，原網(wǎng)站的風(fēng)格、配色、顯示元素、內(nèi)容等，以及原網(wǎng)站的各種動(dòng)態(tài)效果包括下拉菜單、圖片輪播、插入的動(dòng)態(tài)廣告欄等效果均得以保留，使得用戶能夠在移動(dòng)終端上享受與其他終端同樣的視覺(jué)體驗(yàn)。
[0082]本發(fā)明實(shí)施例插入用于調(diào)整頁(yè)面布局的程序代碼；基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度；根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示；相較于現(xiàn)有技術(shù)中，特地針對(duì)移動(dòng)終端設(shè)計(jì)網(wǎng)頁(yè)，或者利用轉(zhuǎn)換工具統(tǒng)一轉(zhuǎn)換各種類型的網(wǎng)頁(yè)的方法，本發(fā)明實(shí)施例具有不需要重新設(shè)計(jì)修改網(wǎng)頁(yè)即可使網(wǎng)頁(yè)頁(yè)面自適應(yīng)移動(dòng)終端顯示屏幕的有益效果，且絲毫不影響原始網(wǎng)頁(yè)的顯示效果，提高了人機(jī)的可交互性；另外，由于僅需要插入對(duì)應(yīng)的JS代碼即可實(shí)現(xiàn)，節(jié)約了大量的人力；同時(shí)，若需要更改對(duì)應(yīng)的視覺(jué)效果只需更改對(duì)應(yīng)地代碼即可，成本較低且便于后期的維護(hù)和升級(jí)。
[0083]圖4是本發(fā)明頁(yè)面布局自適應(yīng)裝置第二實(shí)施例功能模塊示意圖，本實(shí)施例與圖3所述實(shí)施例的區(qū)別是，增加了類型識(shí)別模塊04 ;本實(shí)施例僅對(duì)類型識(shí)別模塊04進(jìn)行描述，有關(guān)本發(fā)明頁(yè)面布局自適應(yīng)裝置所涉及的其他模塊請(qǐng)參照上述相關(guān)實(shí)施例的具體描述，在此不再贅述。
[0084]如圖4所示,本發(fā)明頁(yè)面布局自適應(yīng)裝置還包括:
[0085]類型識(shí)別模塊04，用于基于插入的JS代碼，獲取終端的類型，識(shí)別該終端是否為移動(dòng)終端。
[0086]本實(shí)施例中，在網(wǎng)頁(yè)加載完成后，代碼插入模塊01插入的JS代碼基于終端上的瀏覽器被終端調(diào)用并開(kāi)始運(yùn)行時(shí)，類型識(shí)別模塊04首先獲取終端的類型，并識(shí)別該JS代碼當(dāng)前所運(yùn)行的環(huán)境即該終端是否為移動(dòng)終端；若類型識(shí)別模塊04識(shí)別出該終端不是移動(dòng)終端，則停止運(yùn)行，不進(jìn)行后的網(wǎng)頁(yè)自適應(yīng)的流程；因?yàn)椋季W(wǎng)頁(yè)在一開(kāi)始設(shè)計(jì)的時(shí)候，智能移動(dòng)終端尚未問(wèn)世，因此設(shè)計(jì)的原始網(wǎng)頁(yè)通常是針對(duì)終端如PC機(jī)進(jìn)行設(shè)計(jì)的，所以加載的網(wǎng)頁(yè)當(dāng)然適應(yīng)除移動(dòng)終端之外的·終端，所以，再執(zhí)行后續(xù)的網(wǎng)頁(yè)自適應(yīng)過(guò)程是沒(méi)有意義的。
[0087]本發(fā)明實(shí)施例識(shí)別終端是否為移動(dòng)終端，并在該終端為移動(dòng)終端的情況下，再執(zhí)行頁(yè)面自適應(yīng)程序，避免了不必要的代碼運(yùn)行所引起的系統(tǒng)資源的消耗。
[0088]需要說(shuō)明的是，在本文中，術(shù)語(yǔ)“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過(guò)程、方法、物品或者裝置不僅包括那些要素，而且還包括沒(méi)有明確列出的其他要素，或者是還包括為這種過(guò)程、方法、物品或者裝置所固有的要素。在沒(méi)有更多限制的情況下，由語(yǔ)句“包括一個(gè)……”限定的要素，并不排除在包括該要素的過(guò)程、方法、物品或者裝置中還存在另外的相同要素。
[0089]上述本發(fā)明實(shí)施例序號(hào)僅僅為了描述，不代表實(shí)施例的優(yōu)劣。
[0090]通過(guò)以上的實(shí)施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到上述實(shí)施例方法可借助軟件加必需的通用硬件平臺(tái)的方式來(lái)實(shí)現(xiàn)，當(dāng)然也可以通過(guò)硬件，但很多情況下前者是更佳的實(shí)施方式。基于這樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說(shuō)對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來(lái)，比如上述的JS代碼可以存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)(如R0M/RAM、磁碟、光盤)中，且上述存儲(chǔ)介質(zhì)中也包括若干指令用以使得一臺(tái)終端設(shè)備(可以是手機(jī)，計(jì)算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備，或者圖3、圖4所述的頁(yè)面布局自適應(yīng)裝置等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述的方法。
[0091]以上所述僅為本發(fā)明的優(yōu)選實(shí)施例，并非因此限制其專利范圍，凡是利用本發(fā)明說(shuō)明書及附圖內(nèi)容所作的等效結(jié)構(gòu)或等效流程變換，直接或間接運(yùn)用在其他相關(guān)的【技術(shù)領(lǐng)域】，均同理包括在本發(fā)明的專利保護(hù)范圍內(nèi)。
【權(quán)利要求】
1.一種頁(yè)面布局自適應(yīng)方法，其特征在于，包括以下步驟: 插入用于調(diào)整頁(yè)面布局的程序代碼； 基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度； 根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度； 根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示。
2.如權(quán)利要求1所述的方法，其特征在于，所述插入用于調(diào)整頁(yè)面布局的程序代碼的步驟之后、獲取移動(dòng)終端的屏幕顯示寬度的步驟之前，還包括: 基于插入的所述程序代碼，獲取終端的類型，識(shí)別該終端是否為移動(dòng)終端； 在該終端為移動(dòng)終端時(shí)，執(zhí)行所述步驟: 基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度。
3.如權(quán)利要求1或2所述的方法，其特征在于，所述根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度，包括: 根據(jù)獲取的屏幕顯示寬度，將網(wǎng)頁(yè)的頁(yè)面顯示寬度調(diào)整為與所述屏幕顯示寬度相一致的顯示尺寸。
4.如權(quán)利要求1或2所述的方法，其特征在于，所述調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示覽度，包括: 將某一元素的顯示寬度調(diào)整為該元素對(duì)應(yīng)的父元素的最大顯示寬度。
5.如權(quán)利要求1或2所述的方法，其特征在于，所述獲取移動(dòng)終端的屏幕顯示寬度包括: 獲取移動(dòng)終端的屏幕分辨率； 根據(jù)獲取的所述屏幕分辨率，獲取所述屏幕顯示寬度。
6.一種頁(yè)面布局自適應(yīng)裝置，其特征在于，包括: 代碼插入模塊，用于插入用于調(diào)整頁(yè)面布局的程序代碼； 參數(shù)獲取模塊，用于基于插入的所述程序代碼，獲取移動(dòng)終端的屏幕顯示寬度； 布局調(diào)整模塊，用于根據(jù)獲取的屏幕顯示寬度，按照預(yù)設(shè)比例調(diào)整網(wǎng)頁(yè)的頁(yè)面顯示寬度；根據(jù)所述頁(yè)面顯示寬度，調(diào)整組成網(wǎng)頁(yè)頁(yè)面的各元素的顯示寬度，同時(shí)設(shè)置所述元素的顯示位置為浮動(dòng)顯示。
7.如權(quán)利要求6所述的裝置，其特征在于，還包括: 類型識(shí)別模塊，用于基于插入的所述程序代碼，獲取終端的類型，識(shí)別該終端是否為移動(dòng)終端。
8.如權(quán)利要求6或7所述的裝置，其特征在于，所述布局調(diào)整模塊還用于: 根據(jù)獲取的屏幕顯示寬度，將網(wǎng)頁(yè)的頁(yè)面顯示寬度調(diào)整為與所述屏幕顯示寬度相一致的顯示尺寸。
9.如權(quán)利要求6或7所述的裝置，其特征在于，所述布局調(diào)整模塊還用于: 將某一元素的顯示寬度調(diào)整為該元素對(duì)應(yīng)的父元素的最大顯示寬度。
10.如權(quán)利要求6或7所述的裝置，其特征在于，所述參數(shù)獲取模塊還用于: 獲取移動(dòng)終端的屏幕分辨率； 根據(jù)獲取的所述屏幕分辨率，獲取所述屏幕顯示寬度。
【文檔編號(hào)】G06F9/44GK103593196SQ201310608370
【公開(kāi)日】2014年2月19日 申請(qǐng)日期:2013年11月25日 優(yōu)先權(quán)日:2013年11月25日
【發(fā)明者】陳釗毅 申請(qǐng)人:深信服網(wǎng)絡(luò)科技（深圳）有限公司