頁面布局自適應方法及裝置製造方法

2023-11-04 01:44:47 1

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

【發明內容】

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

【附圖說明】
[0035]圖1是本發明頁面布局自適應方法第一實施例流程示意圖；
[0036]圖2是本發明頁面布局自適應方法第二實施例流程示意圖；
[0037]圖3是本發明頁面布局自適應裝置第一實施例功能模塊示意圖；
[0038]圖4是本發明頁面布局自適應裝置第二實施例功能模塊示意圖。
[0039]本發明實施例目的的實現、功能特點及優點將結合實施例，參照附圖做進一步說明。
【具體實施方式】
[0040]以下結合說明書附圖及具體實施例進一步說明本發明的技術方案。應當理解，此處所描述的具體實施例僅僅用以解釋本發明，並不用於限定本發明。
[0041 ] 圖1是本發明頁面布局自適應方法第一實施例流程示意圖；如圖1所示，本發明頁面布局自適應方法包括以下步驟:[0042]步驟SO1、插入用於調整頁面布局的JS代碼；
[0043]本發明實施例中，頁面布局自適應方法是通過部署的JS代碼實現的。在具體的應用場景中，承載JS代碼的設備如頁面布局自適應裝置可以部署在終端和伺服器之間；承載JS代碼的設備首先對http協議做代理，然後，對所需要在移動終端上顯示的網頁進行重組，且在該網頁處於壓縮狀態時，對該網頁進行解壓；然後，在html頁面的合適位置插入一段JS代碼腳本，這裡所述的合適位置指的是，插入的JS代碼只要不打亂重組後該網頁對應的連結地址即可；在一優選的方案中，可以將該JS代碼插入網頁地址的尾部，這樣不影響該網頁的加載速度。在網頁加載完成後，插入的JS代碼基於終端上的瀏覽器被終端調用並開始運行。JS代碼在終端上運行，使加載的網頁能夠自適應終端的顯示屏幕。 [0044]步驟S02、基於插入的JS代碼，獲取移動終端的屏幕顯示寬度；
[0045]本實施例中，由移動終端上運行的JS代碼來獲取移動終端的屏幕顯示寬度；移動終端上運行的JS代碼獲取該移動終端的屏幕顯示寬度可以通過以下方式實現:獲取移動終端的型號，根據移動終端的型號查找資料庫，調用與該型號對應的該移動終端的屏幕顯示寬度；或者，獲取移動終端的屏幕解析度，根據獲取的移動終端的屏幕分辯率，獲取移動終端的屏幕顯示寬度；或者，直接讀取該移動終端所使用的顯示屏的規格參數，獲取該移動終端的屏幕顯示寬度等。
[0046]步驟S03、根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度；
[0047]插入的JS代碼獲取到移動終端的屏幕顯示寬度後，根據獲取的屏幕顯示寬度，按照預設的比例調整網頁的頁面顯示寬度。該預設比例可以根據加載該網頁的瀏覽器的類型以及獲取的移動終端屏幕顯示寬度確定，或者根據加載該網頁的瀏覽器的類型及移動終端的解析度來確定；或者，在獲取移動終端的相應參數之前，在插入的JS代碼中直接設定該預設比例。
[0048]在一優選的實施例中，設置該預設比例為1.0,即設置網頁頁面的顯示寬度為獲取的該移動終端的屏幕顯示寬度，也可以理解為:根據獲取的屏幕顯示寬度，將網頁的頁面顯示寬度調整為與所述屏幕顯示寬度相一致的顯示尺寸。在具體的應用場景中，可以在網頁地址的頭部增加自適應的meta (元標籤),如在網頁代碼的頭部,加入一行viewport (視口)元標籤，可以用下述代碼實現:
[0049]〈meta name=〃viewport〃content=〃width=device_width，initial-scale=l〃/> ；
[0050]viewport表示網頁默認的寬度和高度，「width=device_width」表示網頁寬度默認等於屏幕寬度，「initial-scaled」表示縮放比例為1.0，即網頁初始大小佔屏幕面積的100%。目前所有主流瀏覽器都支持上述設置，包括IE9。對於一些IE6、IE7、IE8等瀏覽器可以使用css3_mediaqueries.js來實現:
[0051]

〈script
src=!'http://css3-mediaquenes-js.googlecode.com/svn/trunk/css3-mediaqueries.js">

0[0052] 步驟S04、根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示。
[0053]根據獲取的移動終端的頁面顯示寬度，插入該移動終端的JS代碼調整組成該網頁頁面的各元素的顯示寬度和顯示位置；本實施例中，由於網頁頁面的顯示寬度會根據移動終端的屏幕寬度來調整各元素的布局，因此設置各元素的寬度為相對於該網頁頁面寬度的相對寬度，而不使用各元素的絕對寬度進行布局，比如僅設置各元素相對於網頁頁面寬度的百分比寬度。本實施例中，插入移動終端的JS代碼調整網頁頁面的字體、圖片、視頻等的大小也均採用相對大小；例如，設置網頁頁面的字體大小、圖片大小和視頻所佔用的區域大小均為相對於網頁頁面寬度的百分比寬度。
[0054]插入該移動終端的JS代碼設置各元素的顯示位置為浮動顯示，即各元素的顯示位置不是固定不變的；比如，如果該網頁頁面的顯示寬度較小，不能同時容置下兩個元素，則後面的那個元素會自動滾動到前面元素的下方，而不會在水平方向上溢出，從而很好地避免了水平滾動條的出現，方便用戶查看，有利於提高用戶的使用滿意度。
[0055]在一優選的實施例中，設定組成網頁頁面的部分元素的寬度為該元素對應的父元素的最大寬度，防止溢出；也可以將組成網頁頁面的所有元素所佔用的寬度均設置為各元素對應的父元素的最大寬度。
[0056]採用上述設置方式，在JS代碼的作用下，各網頁均能夠根據移動終端的屏幕顯示寬度自適應布局組成該網頁的元素，根本不需要重新設計修改原始已設計好的網頁，省去了大量的人力成本；同時，原網站的風格、配色、顯示元素、內容等，以及原網站的各種動態效果包括下拉菜單、圖片輪播、插入的動態廣告欄等效果均得以保留，使得用戶能夠在移動終端上享受與其他終端同樣的視覺體驗。
[0057]本發明實施例插入用於調整頁面布局的程序代碼；基於插入的所述程序代碼，獲取移動終端的屏幕顯示寬度；根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度；根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示；相較於現有技術中，特地針對移動終端設計網頁，或者利用轉換工具統一轉換各種類型的網頁的方法，本發明實施例具有不需要重新設計修改網頁即可使網頁頁面自適應移動終端顯示屏幕的有益效果，且絲毫不影響原始網頁的顯示效果，提高了人機的可交互性；另外，由於僅需要插入對應的JS代碼即可實現，節約了大量的人力；同時，若需要更改對應的視覺效果只需更改對應地代碼即可，成本較低且便於後期的維護和升級。
[0058]圖2是本發明頁面布局自適應方法第二實施例流程示意圖；本實施例與圖1所述實施例的區別是，增加了步驟Sll ;本實施例僅對步驟Sll進行具體描述，有關本發明頁面布局自適應方法所涉及的其他步驟請參照相關實施例的具體描述，在此不再贅述。
[0059]如圖2所示，本發明頁面布局自適應方法在步驟SO1、插入用於調整頁面布局的JS代碼的步驟之後，步驟S02、基於插入的JS代碼，獲取移動終端的屏幕顯示寬度之前，還包括:
[0060]步驟S11、基於插入的JS代碼，獲取終端的類型，識別該終端是否為移動終端；[0061 ] 在該終〗而為移動終〗而時，執彳了步驟S02:
[0062]基於插入的JS代碼，獲取移動終端的屏幕顯示寬度。[0063]本實施例中，在網頁加載完成後，插入的JS代碼基於終端上的瀏覽器被終端調用並開始運行時，JS代碼首先獲取終端的類型，並識別該JS代碼當前所運行的環境即該終端是否為移動終端；若JS代碼識別出該終端不是移動終端，則停止運行，不進行後的網頁自適應的流程；因為，原始網頁在一開始設計的時候，智能移動終端尚未問世，因此設計的原始網頁通常是針對終端如PC機進行設計的，所以加載的網頁當然適應除移動終端之外的終端，所以，再執行後續的網頁自適應過程是沒有意義的。
[0064]本發明實施例基於插入的程序代碼，識別終端是否為移動終端，並在該終端為移動終端的情況下，再執行頁面自適應程序，避免了不必要的代碼運行所引起的系統資源的消耗。
[0065]當然，在某種情況下，比如設計的該網頁針對某一瀏覽器類型如瀏覽器A設置的，終端上正在加載該網頁的瀏覽器類型如瀏覽器B顯示該網頁的效果，比利用瀏覽器A顯示該網頁的效果稍差，則JS代碼也可以根據瀏覽器B的類型使該網頁的布局自適應該瀏覽器B ;或者，某網頁針對移動終端設計的，當PC機這類非移動終端加載該網頁時，JS代碼也可以使該網頁的布局自適應PC機；或者其他類似情形。上述情形均包括在本發明的思想之內。
[0066]圖3是本發明頁面布局自適應裝置第一實施例功能模塊示意圖；如圖3所示，本發明頁面布局自適應裝置包括:代碼插入模塊01、參數獲取模塊02和布局調整模塊03。
[0067]代碼插入模塊01，用於插入用於調整頁面布局的程序代碼；
[0068]本發明實施例中，頁面布局自適應裝置是通過代碼插入模塊01插入已部署的JS代碼實現的。在具體的應用場景中，承載JS代碼的設備如頁面布局自適應裝置可以部署在終端和伺服器之間；承載JS代碼的設備首先對http協議做代理，然後，對所需要在移動終端上顯示的網頁進行重組，且在該網頁處於壓縮狀態時，對該網頁進行解壓；然後，代碼插入模塊01在html頁面的合適位置插入一段JS代碼腳本，這裡所述的合適位置指的是，代碼插入模塊01插入的JS代碼只要不打亂重組後該網頁對應的連結地址即可；在一優選的方案中，代碼插入模塊01可以將該JS代碼插入網頁地址的尾部，這樣不影響該網頁的加載速度。在網頁加載完成後，代碼插入模塊01插入的JS代碼基於終端上的瀏覽器被終端調用並開始運行。JS代碼在終端上運行，使加載的網頁能夠自適應終端的顯示屏幕。
[0069]參數獲取模塊02，用於基於插入的JS代碼，獲取移動終端的屏幕顯示寬度；
[0070]本實施例中，參數獲取模塊02來獲取移動終端的屏幕顯示寬度；參數獲取模塊02獲取該移動終端的屏幕顯示寬度可以通過以下方式實現:獲取移動終端的型號，根據移動終端的型號查找資料庫，調用與該型號對應的該移動終端的屏幕顯示寬度；或者，獲取移動終端的屏幕解析度，根據獲取的移動終端的屏幕分辯率，獲取移動終端的屏幕顯示寬度；或者，直接讀取該移動終端所使用的顯示屏的規格參數，獲取該移動終端的屏幕顯示寬度等。
[0071]布局調整模塊03，用於根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度；根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示。
[0072]參數獲取模塊02獲取到移動終端的屏幕顯示寬度後，布局調整模塊03根據獲取的屏幕顯示寬度，按照預設的比例調整網頁的頁面顯示寬度。該預設比例可以根據加載該網頁的瀏覽器的類型以及獲取的移動終端屏幕顯示寬度確定，或者根據加載該網頁的瀏覽器的類型及移動終端的解析度來確定；或者，在獲取移動終端的相應參數之前，在插入的JS代碼中直接設定該預設比例。
[0073]在一優選的實施例中，布局調整模塊03設置該預設比例為1.0,即設置網頁頁面的顯示寬度為獲取的該移動終端的屏幕顯示寬度，也可以理解為:根據獲取的屏幕顯示寬度，布局調整模塊03將網頁的頁面顯示寬度調整為與所述屏幕顯示寬度相一致的顯示尺寸。在具體的應用場景中，可以在網頁地址的頭部增加自適應的meta (元標籤)，如在網頁代碼的頭部，加入一行viewport (視口)元標籤，可以用下述代碼實現:
[0074]〈meta name=〃viewport〃content=〃width=device_width，initial-scale=l〃/> ；
[0075]viewport表示網頁默認的寬度和高度，「width=device_width」表示網頁寬度默認等於屏幕寬度，「initial-scaled」表示縮放比例為1.0，即網頁初始大小佔屏幕面積的100%。目前所有主流瀏覽器都支持上述設置，包括IE9。對於一些IE6、IE7、IE8等瀏覽器可以使用css3_mediaqueries.js來實現:
[0076]

<script
src="http://css3-1nediaqueries-js.googlecode.com/svn/trunk/css3-1nediaqueries.js">
[0077]





。
[0078]布局調整模塊03根據獲取的移動終端的頁面顯示寬度，調整組成該網頁頁面的各元素的顯示寬度和顯示位置；本實施例中，由於網頁頁面的顯示寬度會根據移動終端的屏幕寬度來調整各元素的布局，因此布局調整模塊03設置各元素的寬度為相對於該網頁頁面寬度的相對寬度，而不使用各元素的絕對寬度進行布局，比如僅設置各元素相對於網頁頁面寬度的百分比寬度。本實施例中，布局調整模塊03插入移動終端的JS代碼調整網頁頁面的字體、圖片、視頻等的大小也均採用相對大小；例如，布局調整模塊03設置網頁頁面的字體大小、圖片大小和視頻所佔用的區域大小均為相對於網頁頁面寬度的百分比寬度。
[0079]布局調整模塊03設置各元素的顯示位置為浮動顯示，即各元素的顯示位置不是固定不變的；比如，如果該網頁頁面的顯示寬度較小，不能同時容置下兩個元素，則後面的那個元素會通過布局調整模塊03的調整自動滾動到前面元素的下方，而不會在水平方向上溢出，從而很好地避免了水平滾動條的出現，方便用戶查看，有利於提高用戶的使用滿意度。
[0080]在一優選的實施例中，布局調整模塊03設定組成網頁頁面的部分元素的寬度為該元素對應的父元素的最大寬度，防止溢出；布局調整模塊03也可以將組成網頁頁面的所有元素所佔用的寬度均設置為各元素對應的父元素的最大寬度。
[0081]採用上述設置方式，各網頁均能夠根據移動終端的屏幕顯示寬度自適應布局組成該網頁的元素，根本不需要重新設計修改原始已設計好的網頁，省去了大量的人力成本；同時，原網站的風格、配色、顯示元素、內容等，以及原網站的各種動態效果包括下拉菜單、圖片輪播、插入的動態廣告欄等效果均得以保留，使得用戶能夠在移動終端上享受與其他終端同樣的視覺體驗。
[0082]本發明實施例插入用於調整頁面布局的程序代碼；基於插入的所述程序代碼，獲取移動終端的屏幕顯示寬度；根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度；根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示；相較於現有技術中，特地針對移動終端設計網頁，或者利用轉換工具統一轉換各種類型的網頁的方法，本發明實施例具有不需要重新設計修改網頁即可使網頁頁面自適應移動終端顯示屏幕的有益效果，且絲毫不影響原始網頁的顯示效果，提高了人機的可交互性；另外，由於僅需要插入對應的JS代碼即可實現，節約了大量的人力；同時，若需要更改對應的視覺效果只需更改對應地代碼即可，成本較低且便於後期的維護和升級。
[0083]圖4是本發明頁面布局自適應裝置第二實施例功能模塊示意圖，本實施例與圖3所述實施例的區別是，增加了類型識別模塊04 ;本實施例僅對類型識別模塊04進行描述，有關本發明頁面布局自適應裝置所涉及的其他模塊請參照上述相關實施例的具體描述，在此不再贅述。
[0084]如圖4所示,本發明頁面布局自適應裝置還包括:
[0085]類型識別模塊04，用於基於插入的JS代碼，獲取終端的類型，識別該終端是否為移動終端。
[0086]本實施例中，在網頁加載完成後，代碼插入模塊01插入的JS代碼基於終端上的瀏覽器被終端調用並開始運行時，類型識別模塊04首先獲取終端的類型，並識別該JS代碼當前所運行的環境即該終端是否為移動終端；若類型識別模塊04識別出該終端不是移動終端，則停止運行，不進行後的網頁自適應的流程；因為，原始網頁在一開始設計的時候，智能移動終端尚未問世，因此設計的原始網頁通常是針對終端如PC機進行設計的，所以加載的網頁當然適應除移動終端之外的·終端，所以，再執行後續的網頁自適應過程是沒有意義的。
[0087]本發明實施例識別終端是否為移動終端，並在該終端為移動終端的情況下，再執行頁面自適應程序，避免了不必要的代碼運行所引起的系統資源的消耗。
[0088]需要說明的是，在本文中，術語「包括」、「包含」或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者裝置不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者裝置所固有的要素。在沒有更多限制的情況下，由語句「包括一個……」限定的要素，並不排除在包括該要素的過程、方法、物品或者裝置中還存在另外的相同要素。
[0089]上述本發明實施例序號僅僅為了描述，不代表實施例的優劣。
[0090]通過以上的實施方式的描述，本領域的技術人員可以清楚地了解到上述實施例方法可藉助軟體加必需的通用硬體平臺的方式來實現，當然也可以通過硬體，但很多情況下前者是更佳的實施方式。基於這樣的理解，本發明的技術方案本質上或者說對現有技術做出貢獻的部分可以以軟體產品的形式體現出來，比如上述的JS代碼可以存儲在一個存儲介質(如R0M/RAM、磁碟、光碟)中，且上述存儲介質中也包括若干指令用以使得一臺終端設備(可以是手機，計算機，伺服器，或者網絡設備，或者圖3、圖4所述的頁面布局自適應裝置等)執行本發明各個實施例所述的方法。
[0091]以上所述僅為本發明的優選實施例，並非因此限制其專利範圍，凡是利用本發明說明書及附圖內容所作的等效結構或等效流程變換，直接或間接運用在其他相關的【技術領域】，均同理包括在本發明的專利保護範圍內。
【權利要求】
1.一種頁面布局自適應方法，其特徵在於，包括以下步驟: 插入用於調整頁面布局的程序代碼； 基於插入的所述程序代碼，獲取移動終端的屏幕顯示寬度； 根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度； 根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示。
2.如權利要求1所述的方法，其特徵在於，所述插入用於調整頁面布局的程序代碼的步驟之後、獲取移動終端的屏幕顯示寬度的步驟之前，還包括: 基於插入的所述程序代碼，獲取終端的類型，識別該終端是否為移動終端； 在該終端為移動終端時，執行所述步驟: 基於插入的所述程序代碼，獲取移動終端的屏幕顯示寬度。
3.如權利要求1或2所述的方法，其特徵在於，所述根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度，包括: 根據獲取的屏幕顯示寬度，將網頁的頁面顯示寬度調整為與所述屏幕顯示寬度相一致的顯示尺寸。
4.如權利要求1或2所述的方法，其特徵在於，所述調整組成網頁頁面的各元素的顯示覽度，包括: 將某一元素的顯示寬度調整為該元素對應的父元素的最大顯示寬度。
5.如權利要求1或2所述的方法，其特徵在於，所述獲取移動終端的屏幕顯示寬度包括: 獲取移動終端的屏幕解析度； 根據獲取的所述屏幕解析度，獲取所述屏幕顯示寬度。
6.一種頁面布局自適應裝置，其特徵在於，包括: 代碼插入模塊，用於插入用於調整頁面布局的程序代碼； 參數獲取模塊，用於基於插入的所述程序代碼，獲取移動終端的屏幕顯示寬度； 布局調整模塊，用於根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度；根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示。
7.如權利要求6所述的裝置，其特徵在於，還包括: 類型識別模塊，用於基於插入的所述程序代碼，獲取終端的類型，識別該終端是否為移動終端。
8.如權利要求6或7所述的裝置，其特徵在於，所述布局調整模塊還用於: 根據獲取的屏幕顯示寬度，將網頁的頁面顯示寬度調整為與所述屏幕顯示寬度相一致的顯示尺寸。
9.如權利要求6或7所述的裝置，其特徵在於，所述布局調整模塊還用於: 將某一元素的顯示寬度調整為該元素對應的父元素的最大顯示寬度。
10.如權利要求6或7所述的裝置，其特徵在於，所述參數獲取模塊還用於: 獲取移動終端的屏幕解析度； 根據獲取的所述屏幕解析度，獲取所述屏幕顯示寬度。
【文檔編號】G06F9/44GK103593196SQ201310608370
【公開日】2014年2月19日 申請日期:2013年11月25日 優先權日:2013年11月25日
【發明者】陳釗毅 申請人:深信服網絡科技（深圳）有限公司