頁面布局自適應方法及裝置制造方法
【專利摘要】本發(fā)明公開一種頁面布局自適應方法及裝置，本發(fā)明實施例插入用于調(diào)整頁面布局的程序代碼；基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度；根據(jù)獲取的屏幕顯示寬度，按照預設(shè)比例調(diào)整網(wǎng)頁的頁面顯示寬度；根據(jù)所述頁面顯示寬度，調(diào)整組成網(wǎng)頁頁面的各元素的顯示寬度，同時設(shè)置所述元素的顯示位置為浮動顯示；具有不需要重新設(shè)計修改網(wǎng)頁即可使網(wǎng)頁頁面自適應移動終端顯示屏幕的有益效果，且絲毫不影響原始網(wǎng)頁的顯示效果，提高了人機的可交互性；另外，由于僅需要插入對應的JS代碼即可實現(xiàn)，節(jié)約了大量的人力；同時，若需要更改對應的視覺效果只需更改對應地代碼即可，成本較低且便于后期的維護和升級。
【專利說明】頁面布局自適應方法及裝置
【技術(shù)領(lǐng)域】
[0001 ] 本發(fā)明涉及網(wǎng)頁設(shè)計領(lǐng)域，尤其涉及一種頁面布局自適應方法及裝置。
【背景技術(shù)】
[0002]鑒于移動終端的便攜性，用戶可以使用移動終端隨時隨地訪問網(wǎng)頁；受限于移動終端的屏幕尺寸，原始設(shè)計出的網(wǎng)頁頁面在移動終端上顯示時的布局與在PC這類終端上顯示時的布局有很大不同；而針對每種尺寸的移動終端均重新設(shè)計網(wǎng)頁是很不現(xiàn)實的，因為移動終端的尺寸有多種且原始網(wǎng)頁的數(shù)量也很龐大；由此，網(wǎng)頁頁面能夠根據(jù)移動終端的顯示尺寸自適應地布局頁面上的元素便顯得尤其重要。
[0003]目前，某些網(wǎng)站提供了將原始網(wǎng)頁轉(zhuǎn)換為手機版或者觸屏版的工具，利用該轉(zhuǎn)換工具可以快速的把一個網(wǎng)頁移動化，但這種方式能生成的模板格式有限，通常都是“導航+文章列表”的格式，丟失了原網(wǎng)頁很多元素，包括背景、顏色、形象、圖標、LOGO (商標)、內(nèi)容、廣告等，跟原網(wǎng)頁風格幾乎完全不同，只有文字和少量圖片，而且也不支持JS(JavaSCript，程序語言)等動態(tài)效果，比如下拉菜單、彈出菜單等，原網(wǎng)站的廣告內(nèi)容也基本上被去掉了。

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

[0004]鑒于此，有必要提供一種頁面布局自適應方法及裝置，以使網(wǎng)頁頁面能夠根據(jù)移動終端自適應地布局頁面元素。
[0005]本發(fā)明實施例公開了一種頁面布局自適應方法，包括以下步驟:
[0006]插入用于調(diào)整頁面布局的程序代碼；
[0007]基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度；
[0008]根據(jù)獲取的屏幕顯示寬度，按照預設(shè)比例調(diào)整網(wǎng)頁的頁面顯示寬度；
[0009]根據(jù)所述頁面顯示寬度，調(diào)整組成網(wǎng)頁頁面的各元素的顯示寬度，同時設(shè)置所述元素的顯示位置為浮動顯示。
[0010]優(yōu)選地，所述插入用于調(diào)整頁面布局的程序代碼的步驟之后、獲取移動終端的屏幕顯示寬度的步驟之前，還包括:
[0011]基于插入的所述程序代碼，獲取終端的類型，識別該終端是否為移動終端；
[0012]在該終端為移動終端時，執(zhí)行所述步驟:
[0013]基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度。
[0014]優(yōu)選地，所述根據(jù)獲取的屏幕顯示寬度，按照預設(shè)比例調(diào)整網(wǎng)頁的頁面顯示寬度，包括:
[0015]根據(jù)獲取的屏幕顯示寬度，將網(wǎng)頁的頁面顯示寬度調(diào)整為與所述屏幕顯示寬度相一致的顯示尺寸。
[0016]優(yōu)選地，所述調(diào)整組成網(wǎng)頁頁面的各元素的顯示寬度，包括:
[0017]將某一元素的顯示寬度調(diào)整為該元素對應的父元素的最大顯示寬度。
[0018]優(yōu)選地，所述獲取移動終端的屏幕顯示寬度包括:[0019]獲取移動終端的屏幕分辨率；
[0020]根據(jù)獲取的所述屏幕分辨率，獲取所述屏幕顯示寬度。
[0021]本發(fā)明實施例還公開一種頁面布局自適應裝置，包括:
[0022]代碼插入模塊，用于插入用于調(diào)整頁面布局的程序代碼；
[0023]參數(shù)獲取模塊，用于基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度；
[0024]布局調(diào)整模塊，用于根據(jù)獲取的屏幕顯示寬度，按照預設(shè)比例調(diào)整網(wǎng)頁的頁面顯示寬度；根據(jù)所述頁面顯示寬度，調(diào)整組成網(wǎng)頁頁面的各元素的顯示寬度，同時設(shè)置所述元素的顯示位置為浮動顯示。
[0025]優(yōu)選地，所述頁面布局自適應裝置還包括:
[0026]類型識別模塊，用于基于插入的所述程序代碼，獲取終端的類型，識別該終端是否為移動終端。
[0027]優(yōu)選地，所述布局調(diào)整模塊還用于:
[0028]根據(jù)獲取的屏幕顯示寬度，將網(wǎng)頁的頁面顯示寬度調(diào)整為與所述屏幕顯示寬度相一致的顯示尺寸。
[0029]優(yōu)選地，所述布局調(diào)整模塊還用于:
[0030]將某一元素的顯示寬度調(diào)整為該元素對應的父元素的最大顯示寬度。
[0031]優(yōu)選地，所述參數(shù)獲取模塊還用于:
[0032]獲取移動終端的屏幕分辨率；
[0033]根據(jù)獲取的所述屏幕分辨率，獲取所述屏幕顯示寬度。
[0034]本發(fā)明實施例獲取移動終端的屏幕顯示寬度；根據(jù)獲取的屏幕顯示寬度，按照預設(shè)比例調(diào)整網(wǎng)頁的頁面顯示寬度；根據(jù)所述頁面顯示寬度，調(diào)整組成網(wǎng)頁頁面的各元素的顯示寬度，同時設(shè)置所述元素的顯示位置為浮動顯示；相較于現(xiàn)有技術(shù)中，特地針對移動終端設(shè)計網(wǎng)頁，或者利用轉(zhuǎn)換工具統(tǒng)一轉(zhuǎn)換各種類型的網(wǎng)頁的方法，本發(fā)明實施例具有不需要重新設(shè)計修改網(wǎng)頁即可使網(wǎng)頁頁面自適應移動終端顯示屏幕的有益效果，且絲毫不影響原始網(wǎng)頁的顯示效果。
【專利附圖】

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