專利名稱：頁面布局自適應(yīng)方法及裝置的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及網(wǎng)頁設(shè)計(jì)領(lǐng)域，尤其涉及一種頁面布局自適應(yīng)方法及裝置。
背景技術(shù)：
電子地圖網(wǎng)站的主要功能，在于將用戶關(guān)心的信息結(jié)合地圖的方式展現(xiàn)出來，以 更直觀的方式為用戶提供諸如購物、交通出行等生活信息服務(wù)。但是，在顯示地圖頁面時(shí)， 經(jīng)常會(huì)遇到同一個(gè)地圖頁面，在不同分辨率的顯示器中、不同大小瀏覽器窗口中以及不同 類型瀏覽器中，顯示的地圖頁面效果不同的情況，因此，如何實(shí)現(xiàn)地圖頁面的自適應(yīng)，即如 何將同一個(gè)地圖頁面在不同分辨率的顯示器中、不同大小的瀏覽器窗口中以及不同類型的 瀏覽器中，顯示相同的地圖頁面效果，成為衡量該地圖網(wǎng)站質(zhì)量好壞的重要指標(biāo)。目前較通用的實(shí)現(xiàn)頁面布局自適應(yīng)的方法，主要是通過調(diào)整頁面元素的百分比相 對高度和寬度實(shí)現(xiàn)，該種方案包括當(dāng)元素的父元素高度和寬度屬性發(fā)生變化時(shí)，其相應(yīng)屬 性的絕對值也跟著變化，同時(shí)，保留頁面級別的滾動(dòng)條，以保證瀏覽器的窗口大小發(fā)生變化 時(shí)頁面元素不至于發(fā)生變形而導(dǎo)致布局混亂。但是，在發(fā)明人實(shí)施上述方案時(shí)，由于頁面中存在頁面級的滾動(dòng)條，地圖大小不能 自動(dòng)伸縮，當(dāng)窗口變小時(shí)，不能與之前窗口顯示相同的內(nèi)容，用戶必須要手動(dòng)滑動(dòng)滾動(dòng)條才 能看到地圖頁面的全部內(nèi)容，使得用戶查看信息很不方便，用戶體驗(yàn)效果很差。

發(fā)明內(nèi)容
本發(fā)明的實(shí)施例提供一種頁面布局自適應(yīng)方法及裝置，能夠在不同分別率的屏幕 中、不同類型瀏覽器以及不同大小瀏覽器窗口中，顯示相同的頁面內(nèi)容，方便用戶查看頁面 內(nèi)容，提高了用戶體驗(yàn)。為達(dá)到上述目的，本發(fā)明的實(shí)施例采用如下技術(shù)方案一種頁面布局自適應(yīng)方法，包括獲取屏幕顯示參數(shù)，所述屏幕顯示參數(shù)為以下參數(shù)中的至少一個(gè)參數(shù)，該參數(shù)包 括屏幕分辨率、瀏覽器的窗口大小以及用戶當(dāng)前使用瀏覽器的類型；根據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度；根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度和寬度，設(shè) 置所述頁面文檔中可變區(qū)域的高度和寬度；調(diào)整所述頁面文檔中固定區(qū)域的位置。一種頁面布局自適應(yīng)裝置，包括第一獲取單元，用于獲取屏幕顯示參數(shù)，所述屏幕顯示參數(shù)為以下參數(shù)中的至少 一個(gè)參數(shù)，該參數(shù)包括屏幕分辨率、瀏覽器的窗口大小以及用戶當(dāng)前使用瀏覽器的類型；第二獲取單元，用于根據(jù)所述第一獲取單元獲取的所述屏幕顯示參數(shù)，獲取當(dāng)前 頁面的頁面文檔的高度和寬度；設(shè)置單元，用于根據(jù)所述第二獲取單元獲取的所述頁面文檔的高度和寬度以及所
4述頁面文檔中固定區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度；調(diào)整單元，用于調(diào)整所述頁面文檔中固定區(qū)域的位置。本發(fā)明實(shí)施例提供的技術(shù)方案，在顯示當(dāng)前頁面時(shí)，先獲取屏幕分辨率、瀏覽器的 窗口大小以及用戶當(dāng)前使用瀏覽器的類型中的至少一個(gè)屏幕顯示參數(shù)，并根據(jù)該屏幕顯示 參數(shù)，獲取當(dāng)前頁面的頁面文檔的高度和寬度，進(jìn)而根據(jù)該頁面文檔的高度和寬度設(shè)置該 頁面文檔中可變區(qū)域的高度和寬度，并調(diào)整頁面文檔中固定區(qū)域的位置，從而實(shí)現(xiàn)了在不 同分別率的屏幕中、不同類型瀏覽器以及不同大小瀏覽器窗口中，顯示相同的頁面內(nèi)容，方 便用戶查看頁面內(nèi)容，提高了用戶體驗(yàn)。


為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實(shí)施例或現(xiàn) 有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本 發(fā)明的一些實(shí)施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以 根據(jù)這些附圖獲得其他的附圖。圖1為本發(fā)明實(shí)施例1中頁面布局自適應(yīng)方法的流程圖；圖2為本發(fā)明實(shí)施例2中頁面的頁面文檔布局結(jié)構(gòu)示意圖；圖3為本發(fā)明實(shí)施例2中頁面布局自適應(yīng)方法的流程圖；圖4為本發(fā)明實(shí)施例3中頁面布局自適應(yīng)方法的流程圖；圖5為本發(fā)明實(shí)施例4中頁面布局自適應(yīng)方法的流程圖；圖6為本發(fā)明實(shí)施例5中一種頁面布局自適應(yīng)裝置的組成框圖；圖7為本發(fā)明實(shí)施例5中另一種頁面布局自適應(yīng)裝置的組成框圖；圖8為本發(fā)明實(shí)施例5中另一種頁面布局自適應(yīng)裝置的組成框圖；圖9為本發(fā)明實(shí)施例5中另一種頁面布局自適應(yīng)裝置的組成框圖；圖10為本發(fā)明實(shí)施例5中另一種頁面布局自適應(yīng)裝置的組成框圖。
具體實(shí)施例方式下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完 整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；?本發(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他 實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。實(shí)施例1本發(fā)明實(shí)施例提供一種頁面布局自適應(yīng)方法，如圖1所示，該方法包括101、獲取屏幕顯示參數(shù)，所述屏幕顯示參數(shù)為以下參數(shù)中的至少一個(gè)參數(shù)，該參 數(shù)包括屏幕分辨率、瀏覽器的窗口大小以及用戶當(dāng)前使用瀏覽器的類型。其中，當(dāng)獲取的是屏幕分辨率時(shí)，可以在當(dāng)加載當(dāng)前頁面時(shí)獲?。划?dāng)獲取的是瀏覽 器的窗口大小時(shí)，可以在加載頁面時(shí)獲取瀏覽器的窗口大小，也可以在瀏覽器的窗口大小 發(fā)生變化時(shí)獲取所述瀏覽器的窗口大??；當(dāng)獲取的是用戶當(dāng)前使用瀏覽器的類型時(shí)，可以 在打開瀏覽器時(shí)獲取所述用戶當(dāng)前使用瀏覽器的類型。102、根據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度。
5
其中，所述根據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度，可以 包括當(dāng)所述屏幕顯示參數(shù)為屏幕分辨率、瀏覽器的窗口大小中的至少一個(gè)參數(shù)時(shí)，根 據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度，包括根據(jù)所述屏幕顯示參 數(shù)計(jì)算所述當(dāng)前瀏覽器窗口的高度和寬度；獲取所述當(dāng)前瀏覽器窗口中地址欄、菜單欄和 狀態(tài)欄的高度之和、寬度之和；將所述當(dāng)前頁面的高度和寬度分別減去所述高度之和、所述 寬度之和，得到所述頁面文檔的高度和寬度。當(dāng)所述屏幕顯示參數(shù)中包括所述用戶當(dāng)前使用瀏覽器的類型時(shí)，所述根據(jù)所述屏 幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度，包括根據(jù)所述瀏覽器的類型確定與 所述瀏覽器的類型對應(yīng)的頁面布局中所包含元素的樣式參數(shù)；根據(jù)所述元素的樣式參數(shù)獲 取當(dāng)前頁面的頁面文檔的高度和寬度。103、根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度和寬 度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度。其中，所述根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度 和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度，可以包括獲取所述頁面文檔中固定區(qū)域的高度和寬度；將所述頁面文檔的高度和寬度分 別減去所述頁面文檔中固定區(qū)域的高度和寬度，得到所述頁面文檔中可變區(qū)域的高度和寬 度；按照所述得到所述頁面文檔中可變區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域 的高度和寬度。104、調(diào)整所述頁面文檔中固定區(qū)域的位置。其中，所述調(diào)整所述頁面文檔中固定區(qū)域的位置，包括確定所述固定區(qū)域的水平 位置和垂直位置，并根據(jù)所述確定的水平位置和垂直位置調(diào)整所述頁面文檔中固定區(qū)域的 位置；其中，確定頁面文檔中與所述可變區(qū)域相鄰的右側(cè)固定區(qū)域的水平位置時(shí)，可以 通過確定該固定區(qū)域的左側(cè)水平位置確定，而確定該固定區(qū)域的左側(cè)水平位置，可以通過 以下公式確定，該公式為左側(cè)水平位置=與所述可變區(qū)域相鄰的左側(cè)固定區(qū)域的寬度+ 可變區(qū)域的寬度；該左側(cè)水平位置的單位為屏幕像素(PX)。確定頁面文檔中與所述可變區(qū)域相鄰的下方固定區(qū)域的垂直位置時(shí)，可以通過確 定該固定區(qū)域的上端的垂直位置確定，而確定該固定區(qū)域的上端的垂直位置，可以通過以 下公式確定，該公式為左側(cè)水平位置=與所述可變區(qū)域相鄰的左側(cè)固定區(qū)域的寬度+可 變區(qū)域的寬度；該左側(cè)水平位置的單位為屏幕像素(PX)。本發(fā)明實(shí)施例中，在顯示當(dāng)前頁面時(shí)，先獲取屏幕分辨率、瀏覽器的窗口大小以及 用戶當(dāng)前使用瀏覽器的類型中的至少一個(gè)屏幕顯示參數(shù)，并根據(jù)該屏幕顯示參數(shù)，獲取當(dāng) 前頁面的頁面文檔的高度和寬度，進(jìn)而根據(jù)該頁面文檔的高度和寬度設(shè)置該頁面文檔中可 變區(qū)域的高度和寬度，并調(diào)整頁面文檔中固定區(qū)域的位置，從而實(shí)現(xiàn)了在不同分辨率的屏 幕中、不同類型瀏覽器以及不同大小的瀏覽窗口中，顯示相同的頁面內(nèi)容，方便用戶查看頁 面內(nèi)容，提高了用戶體驗(yàn)。實(shí)施例2本發(fā)明實(shí)施例提供一種頁面布局自適應(yīng)方法，該方法具體以根據(jù)屏幕分辨率實(shí)現(xiàn)
6頁面布局自適應(yīng)，結(jié)合圖2和圖3具體闡述該方法。圖2為本發(fā)明提供的自適應(yīng)應(yīng)用頁面布 局的頁面文檔結(jié)構(gòu)示意圖，該示意圖中包括三部分，頁面文檔的上部包含公司Logo區(qū)域、 模塊導(dǎo)航區(qū)域以及自動(dòng)擴(kuò)展區(qū)域；頁面文檔的中部包含地圖顯示區(qū)域和文本顯示區(qū)域兩個(gè) 部分；頁面文檔的底部則包含用于顯示公司版權(quán)信息的公司版權(quán)區(qū)域；上述三個(gè)部分中根 據(jù)區(qū)域是否可變，又可分為頁面文檔的固定區(qū)域和可變區(qū)域，該頁面文檔的固定區(qū)域包括 公司Logo區(qū)域、模塊導(dǎo)航區(qū)、文本顯示區(qū)域以及公司版權(quán)區(qū)域；該頁面文檔的可變區(qū)域包 括自動(dòng)擴(kuò)展區(qū)域和地圖顯示區(qū)域。該方法如圖3所示，包括201、系統(tǒng)獲取屏幕分辨率。其中，當(dāng)加載當(dāng)前頁面時(shí)，系統(tǒng)獲取本機(jī)的屏幕分辨率。202、所述系統(tǒng)根據(jù)所述屏幕分辨率獲取當(dāng)前頁面的頁面文檔的高度和寬度，保證 頁面文檔中的所有元素的高度和寬度均不超過所述頁面文檔的高度和寬度。其中，所述系統(tǒng)在獲取了本機(jī)的屏幕分辨率后，根據(jù)所述屏幕分辨率獲取當(dāng)前頁 面的頁面文檔的高度和寬度；所述根據(jù)所述屏幕分辨率獲取當(dāng)前頁面的頁面文檔的高度和 寬度，可以采用以下方法，該方法包括根據(jù)所述屏幕分別率計(jì)算所述當(dāng)前瀏覽器窗口的高度和寬度；獲取所述當(dāng)前瀏覽 器窗口中地址欄、菜單欄和狀態(tài)欄的高度之和、寬度之和；將所述當(dāng)前瀏覽器窗口的高度和 寬度分別減去所述高度之和、所述寬度之和，得到所述頁面文檔的高度和寬度。203、根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度和寬 度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度。其中，所述根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度 和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度，可以采用以下方法，該方法包括獲取所述頁面文檔中固定區(qū)域的高度和寬度；將所述頁面文檔的高度和寬度分 別減去所述頁面文檔中固定區(qū)域的高度和寬度，得到所述頁面文檔中可變區(qū)域的高度和寬 度；按照所述得到所述頁面文檔中可變區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域 的高度和寬度。本發(fā)明實(shí)施例中，如圖2所示的頁面布局，其由三部分組成，所述設(shè)置所述頁面文 檔中可變區(qū)域的高度和寬度可以為首先，系統(tǒng)獲取所述頁面文檔的上部的固定區(qū)域的寬度，即獲取Logo區(qū)域和模塊 導(dǎo)航區(qū)域的寬度之和，將所述頁面文檔的寬度減去所述頁面文檔中Logo區(qū)域和模塊導(dǎo)航 區(qū)域的寬度之和，得到自動(dòng)擴(kuò)展區(qū)域的寬度，并按照所述得到所述自動(dòng)擴(kuò)展區(qū)域的寬度設(shè) 置所述自動(dòng)擴(kuò)展區(qū)域的寬度，并按照Logo區(qū)域的高度設(shè)置所述自動(dòng)擴(kuò)展區(qū)域的高度。其次，系統(tǒng)獲取所述頁面文檔的固定區(qū)域的高度，即獲取Logo區(qū)域和公司版權(quán)區(qū) 域的高度之和，將所述頁面文檔的高度減去所述頁面文檔中Logo區(qū)域和公司版權(quán)區(qū)域的 高度之和，得到地圖顯示區(qū)域的高度；獲取所述頁面文檔的中部的固定區(qū)域的寬度，即獲取 文本顯示區(qū)域的寬度，將所述頁面文檔的寬度減去所述頁面文檔中文本顯示區(qū)域的寬度， 得到地圖顯示區(qū)域的寬度，按照所述獲取的地圖顯示區(qū)域的高度和寬度，設(shè)置所述地圖顯 示區(qū)域的高度和寬度。完成該設(shè)置后，所述頁面文檔的中部區(qū)域自動(dòng)撐開。204、調(diào)整所述頁面文檔中固定區(qū)域的位置，使所述頁面文檔的各區(qū)域撐開。其中，本發(fā)明實(shí)施例中，所述調(diào)整所述頁面文檔中固定區(qū)域的位置，如圖2所示，
7調(diào)整所述模塊導(dǎo)航區(qū)域和文本顯示區(qū)域兩個(gè)部分的位置。根據(jù)實(shí)施例1中的步驟104中所 述，確定所述模塊導(dǎo)航區(qū)域的位置包括確定該模塊導(dǎo)航區(qū)域的左側(cè)水平位置，確定該模塊 導(dǎo)航區(qū)域的左側(cè)水平位置為Logo區(qū)域的寬度+自動(dòng)擴(kuò)展區(qū)域的寬度；確定該模塊導(dǎo)航區(qū) 域的垂直位置為=Logo區(qū)域和自動(dòng)擴(kuò)展區(qū)域的垂直位置。確定文本顯示區(qū)域的位置包括確定該文本顯示區(qū)域的左側(cè)水平位置，確定該文 本顯示區(qū)域的左側(cè)水平位置為地圖顯示區(qū)域的寬度；確定該文本顯示區(qū)域的垂直位置 為該塊模導(dǎo)航區(qū)域的高度。本發(fā)明實(shí)施例中，在加載當(dāng)前頁面時(shí)，系統(tǒng)獲取本機(jī)的屏幕分辨率，并根據(jù)該屏幕 分辨率獲取當(dāng)前頁面的頁面文檔的高度和寬度，進(jìn)而根據(jù)該頁面文檔的高度和寬度設(shè)置該 頁面文檔中可變區(qū)域的高度和寬度，并調(diào)整頁面文檔中固定區(qū)域的位置，從而實(shí)現(xiàn)了在不 同分辨率的屏幕中，顯示相同的頁面內(nèi)容，方便用戶查看頁面內(nèi)容，提高了用戶體驗(yàn)。實(shí)施例3本發(fā)明實(shí)施例提供一種頁面布局自適應(yīng)方法，該方法以根據(jù)器瀏覽器的窗口大小 實(shí)現(xiàn)頁面布局自適應(yīng)為例，結(jié)合圖2和圖4具體闡述該方法，該方法如圖4所示，包括301、系統(tǒng)獲取瀏覽器的窗口大小。其中，所述獲取瀏覽器的窗口大小可以在加載頁面時(shí)獲取瀏覽器的窗口大小，也 可以在瀏覽器的窗口大小發(fā)生變化時(shí)，獲取所述瀏覽器的窗口大小。302、所述系統(tǒng)根據(jù)所述瀏覽器的窗口大小獲取當(dāng)前頁面的頁面文檔的高度和寬 度，保證頁面文檔中的所有元素的高度和寬度均不超過所述頁面文檔的高度和寬度。其中，所述系統(tǒng)在獲取了瀏覽器的窗口大小后，根據(jù)所述瀏覽器的窗口大小，獲取 當(dāng)前頁面的頁面文檔的高度和寬度；所述根據(jù)瀏覽器的窗口大小，獲取當(dāng)前頁面的頁面文 檔的高度和寬度，可以采用以下方法，該方法包括獲取所述當(dāng)前瀏覽器窗口中地址欄、菜單欄和狀態(tài)欄的高度之和、寬度之和；將所 述當(dāng)前瀏覽器窗口的高度和寬度分別減去所述高度之和、所述寬度之和，得到所述頁面文 檔的高度和寬度。303、根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度和寬 度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度。其中，所述根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度 和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度的方法，可以參考實(shí)施例2中的步驟 203中的相應(yīng)描述，本發(fā)明實(shí)施例此處將不再贅述。304、調(diào)整所述頁面文檔中固定區(qū)域的位置，使所述頁面文檔的各區(qū)域撐開。其中，調(diào)整所述頁面文檔中固定區(qū)域的位置的具體描述，可以參考實(shí)施例2中的 步驟204中的相應(yīng)描述，本發(fā)明實(shí)施例此處將不再贅述。本發(fā)明實(shí)施例中，在顯示當(dāng)前頁面的窗口變化時(shí)，系統(tǒng)獲取當(dāng)前窗口的大小，并根 據(jù)該窗口的大小獲取當(dāng)前頁面的頁面文檔的高度和寬度，進(jìn)而根據(jù)該頁面文檔的高度和寬 度設(shè)置該頁面文檔中可變區(qū)域的高度和寬度，并調(diào)整頁面文檔中固定區(qū)域的位置，從而實(shí) 現(xiàn)了在不同大小的瀏覽窗口中，顯示相同的頁面內(nèi)容，方便用戶查看頁面內(nèi)容，提高了用戶 體驗(yàn)。實(shí)施例4
8
本發(fā)明實(shí)施例提供一種頁面布局自適應(yīng)方法，本發(fā)明實(shí)施例以根據(jù)瀏覽器的類型 實(shí)現(xiàn)頁面布局自適應(yīng)為例，具體闡述該方法，如圖5所示，該方法包括401、系統(tǒng)獲取用戶當(dāng)前使用瀏覽器的類型；其中，目前使用的主流瀏覽器的類型包括:IE(IE6, IE7，IE8)，F(xiàn)ireFox 3. 0及以 上，Safari、以及Opera等，上述不同類型的瀏覽器使用W3C和微軟IE標(biāo)準(zhǔn)。402、根據(jù)所述用戶當(dāng)前使用瀏覽器的類型獲取當(dāng)前頁面的頁面文檔的高度和寬度。其中，根據(jù)所述用戶當(dāng)前使用瀏覽器的類型獲取當(dāng)前頁面的頁面文檔的高度和寬 度，可以采用以下方法，包括根據(jù)所述瀏覽器的類型確定與所述瀏覽器的類型對應(yīng)的頁面布局中所包含元素 的樣式參數(shù)；根據(jù)所述元素的樣式參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度，具體根據(jù) 預(yù)設(shè)的瀏覽器類型與頁面布局中所包含元素的樣式參數(shù)的對應(yīng)關(guān)系，確定與所述瀏覽器的 類型對應(yīng)的頁面布局中所包含元素的樣式參數(shù)。其中，所述頁面布局中所包含元素的樣式 參數(shù)可以包含元素的高度、寬度、位置以及文字顏色、背景顏色等參數(shù)，但本發(fā)明實(shí)施例對 此不進(jìn)行限制，還可以是其他參數(shù)。403、根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度和寬 度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度。其中，所述根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度 和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度的方法，可以參考實(shí)施例2中的步驟 203中的相應(yīng)描述，本發(fā)明實(shí)施例此處將不再贅述。404、調(diào)整所述頁面文檔中固定區(qū)域的位置，使所述頁面文檔的各區(qū)域撐開。其中，調(diào)整所述頁面文檔中固定區(qū)域的位置的具體描述，可以參考實(shí)施例2中的 步驟204中的相應(yīng)描述，本發(fā)明實(shí)施例此處將不再贅述。本發(fā)明實(shí)施例中，當(dāng)用戶使用不同類型的瀏覽器時(shí)，系統(tǒng)根據(jù)預(yù)設(shè)的瀏覽器類型 與頁面布局中所包含元素的樣式參數(shù)的對應(yīng)關(guān)系，確定與所述瀏覽器的類型對應(yīng)的頁面布 局中所包含元素的樣式參數(shù)，并確定當(dāng)前頁面文檔的高度和寬度，進(jìn)而根據(jù)該頁面文檔的 高度和寬度設(shè)置該頁面文檔中可變區(qū)域的高度和寬度，并調(diào)整頁面文檔中固定區(qū)域的位 置，從而保證在不同類型的瀏覽器中，顯示相同的頁面內(nèi)容，方便用戶查看頁面內(nèi)容，提高 了用戶體驗(yàn)。需要說明的是，用戶在具體實(shí)施頁面的自適應(yīng)方案時(shí)，可以根據(jù)屏幕分辨率、瀏覽 器的窗口大小或用戶當(dāng)前使用瀏覽器的類型中的一個(gè)參數(shù)，參考實(shí)施例2、實(shí)施例3以及實(shí) 施例4，實(shí)現(xiàn)頁面布局的自適應(yīng)；當(dāng)然，用戶還可以根據(jù)屏幕分辨率、瀏覽器的窗口大小或 用戶當(dāng)前使用瀏覽器的類型中的至少兩個(gè)參數(shù)，實(shí)現(xiàn)頁面布局的自適應(yīng)，本發(fā)明實(shí)施例對 此不進(jìn)行限制。實(shí)施例5本發(fā)明實(shí)施例提供一種頁面布局自適應(yīng)裝置，如圖6所示，該裝置包括第一獲取 單元51、第二獲取單元52、設(shè)置單元53和調(diào)整單元54。第一獲取單元51，用于屏幕顯示參數(shù)，所述屏幕顯示參數(shù)為以下參數(shù)中的至少一 個(gè)參數(shù)，該參數(shù)包括屏幕分辨率、瀏覽器的窗口大小以及用戶當(dāng)前使用瀏覽器的類型。其
9中，當(dāng)?shù)谝猾@取單元51獲取的是屏幕分辨率時(shí)，可以在當(dāng)加載當(dāng)前頁面時(shí)獲?。划?dāng)?shù)谝猾@ 取單元51獲取的是瀏覽器的窗口大小時(shí)，可以在加載頁面時(shí)獲取瀏覽器的窗口大小，也可 以在瀏覽器的窗口大小發(fā)生變化時(shí)，獲取所述瀏覽器的窗口大小；當(dāng)獲取的是用戶當(dāng)前使 用瀏覽器的類型時(shí)，可以在打開瀏覽器時(shí)獲取所述用戶當(dāng)前使用瀏覽器的類型。第二獲取單元52，用于根據(jù)所述第一獲取單元51獲取的所述屏幕顯示參數(shù)，獲取 當(dāng)前頁面的頁面文檔的高度和寬度。設(shè)置單元53，用于根據(jù)所述第二獲取單元52獲取的所述頁面文檔的高度和寬度 以及所述頁面文檔中固定區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬 度；調(diào)整單元54，用于調(diào)整所述頁面文檔中固定區(qū)域的位置。進(jìn)一步的，如圖7所示，當(dāng)所述第一獲取單元51獲取的屏幕顯示參數(shù)中包含屏幕 分辨率時(shí)，所述第二獲取單元52包括第一計(jì)算模塊521、第一獲取模塊522和第二計(jì)算模 塊 523。在所述第二獲取單元52獲取當(dāng)前頁面的頁面文檔的高度和寬度時(shí)，第一計(jì)算模 塊521，用于根據(jù)所述屏幕顯示參數(shù)計(jì)算所述當(dāng)前瀏覽器窗口的高度和寬度；第一獲取模 塊522，用于獲取所述第一計(jì)算模塊得到的所述當(dāng)前瀏覽器窗口中地址欄、菜單欄和狀態(tài)欄 的高度之和、寬度之和；第二計(jì)算模塊523，用于將所述第一計(jì)算模塊521得到的所述當(dāng)前 瀏覽器窗口的高度和寬度，分別減去所述第一獲取模塊522獲取的所述高度之和、所述寬 度之和，得到所述頁面文檔的高度和寬度。進(jìn)一步的，如圖8所示，當(dāng)所述第一獲取單元51獲取的屏幕顯示參數(shù)中包含瀏覽 器的窗口大小時(shí)，所述第二獲取單元52包括第二獲取模塊524和第三計(jì)算模塊525。在所述第二獲取單元52獲取當(dāng)前頁面的頁面文檔的高度和寬度時(shí)，第二獲取模 塊524，用于獲取所述當(dāng)前瀏覽器窗口中地址欄、菜單欄和狀態(tài)欄的高度之和、寬度之和； 第三計(jì)算模塊525，用于將所述當(dāng)前瀏覽器窗口的高度和寬度分別減去所述第二獲取模塊 524獲取的所述高度之和、所述寬度之和，得到所述頁面文檔的高度和寬度。進(jìn)一步的，如圖9所示，當(dāng)所述第一獲取單元51獲取的所述屏幕顯示參數(shù)中包括 所述用戶當(dāng)前使用瀏覽器的類型時(shí)，所述第二獲取單元52包括確定模塊526和第三獲取 模塊527。在所述第二獲取單元52獲取當(dāng)前頁面的頁面文檔的高度和寬度時(shí)，確定模塊 526，用于根據(jù)所述瀏覽器的類型確定與所述瀏覽器的類型對應(yīng)的頁面布局中所包含元素 的樣式參數(shù)；第三獲取模塊527，用于根據(jù)所述確定模塊526確定的所述元素的樣式參數(shù)獲 取當(dāng)前頁面的頁面文檔的高度和寬度。進(jìn)一步的，如圖10所示，所述設(shè)置單元53包括第二獲取模塊531、第三計(jì)算模塊 532和設(shè)置模塊533。在所述設(shè)置單元53設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度時(shí)，第二獲取模 塊531，用于獲取所述頁面文檔中固定區(qū)域的高度和寬度；第三計(jì)算模塊532，用于將所述 第二計(jì)算模塊531計(jì)算得到的所述頁面文檔的高度和寬度，分別減去所述頁面文檔中固定 區(qū)域的高度和寬度，得到所述頁面文檔中可變區(qū)域的高度和寬度；設(shè)置模塊533，用于按照 所述第三計(jì)算模塊532計(jì)算得到所述頁面文檔中可變區(qū)域的高度和寬度，設(shè)置所述頁面文
10檔中可變區(qū)域的高度和寬度。本發(fā)明實(shí)施例中，在顯示當(dāng)前頁面時(shí)，先獲取屏幕分辨率、瀏覽器的窗口大小以及 用戶當(dāng)前使用瀏覽器的類型中的至少一個(gè)屏幕顯示參數(shù)，并根據(jù)該屏幕顯示參數(shù)，獲取當(dāng) 前頁面的頁面文檔的高度和寬度，進(jìn)而根據(jù)該頁面文檔的高度和寬度設(shè)置該頁面文檔中可 變區(qū)域的高度和寬度，并調(diào)整頁面文檔中固定區(qū)域的位置，從而實(shí)現(xiàn)了在不同分辨率的屏 幕中、不同類型瀏覽器以及不同大小的瀏覽窗口中，顯示相同的頁面內(nèi)容，方便用戶查看頁 面內(nèi)容，提高了用戶體驗(yàn)。通過以上的實(shí)施方式的描述，所屬領(lǐng)域的技術(shù)人員可以清楚地了解到本發(fā)明可借 助軟件加必需的通用硬件的方式來實(shí)現(xiàn)，當(dāng)然也可以通過硬件，但很多情況下前者是更佳 的實(shí)施方式?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻(xiàn)的部 分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品存儲在可讀取的存儲介質(zhì)中，如計(jì) 算機(jī)的軟盤，硬盤或光盤等，包括若干指令用以使得一臺計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)， 服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述的方法。以上所述，僅為本發(fā)明的具體實(shí)施方式
，但本發(fā)明的保護(hù)范圍并不局限于此，任何 熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，可輕易想到變化或替換，都應(yīng)涵 蓋在本發(fā)明的保護(hù)范圍之內(nèi)。因此，本發(fā)明的保護(hù)范圍應(yīng)以所述權(quán)利要求的保護(hù)范圍為準(zhǔn)。
1權(quán)利要求
一種頁面布局自適應(yīng)方法，其特征在于，包括獲取屏幕顯示參數(shù)，所述屏幕顯示參數(shù)為以下參數(shù)中的至少一個(gè)參數(shù)，該參數(shù)包括屏幕分辨率、瀏覽器的窗口大小以及用戶當(dāng)前使用瀏覽器的類型；根據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度；根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度；調(diào)整所述頁面文檔中固定區(qū)域的位置。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，當(dāng)所述屏幕顯示參數(shù)中包含屏幕分辨率 時(shí)，所述根據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度，包括根據(jù)所述屏幕顯示參數(shù)計(jì)算所述當(dāng)前瀏覽器窗口的高度和寬度； 獲取所述當(dāng)前瀏覽器窗口中地址欄、菜單欄和狀態(tài)欄的高度之和、寬度之和； 將所述當(dāng)前瀏覽器窗口的高度和寬度分別減去所述高度之和、所述寬度之和，得到所 述頁面文檔的高度和寬度。
3.根據(jù)權(quán)利要求1所述的方法，其特征在于，當(dāng)所述屏幕顯示參數(shù)中包含瀏覽器的窗 口大小時(shí)，所述根據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度，包括獲取所述當(dāng)前瀏覽器窗口中地址欄、菜單欄和狀態(tài)欄的高度之和、寬度之和； 將所述當(dāng)前瀏覽器窗口的高度和寬度分別減去所述高度之和、所述寬度之和，得到所 述頁面文檔的高度和寬度。
4.根據(jù)權(quán)利要求1所述的方法，其特征在于，當(dāng)所述屏幕顯示參數(shù)中包括所述用戶當(dāng) 前使用瀏覽器的類型時(shí)，所述根據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬 度，包括根據(jù)所述瀏覽器的類型確定與所述瀏覽器的類型對應(yīng)的頁面布局中所包含元素的樣 式參數(shù)；根據(jù)所述元素的樣式參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度。
5.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)所述頁面文檔的高度和寬度以 及所述頁面文檔中固定區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度， 包括獲取所述頁面文檔中固定區(qū)域的高度和寬度；將所述頁面文檔的高度和寬度分別減去所述頁面文檔中固定區(qū)域的高度和寬度，得到 所述頁面文檔中可變區(qū)域的高度和寬度；按照所述得到所述頁面文檔中可變區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域 的高度和寬度。
6. 一種頁面布局自適應(yīng)裝置，其特征在于，包括第一獲取單元，用于獲取屏幕顯示參數(shù)，所述屏幕顯示參數(shù)為以下參數(shù)中的至少一個(gè) 參數(shù)，該參數(shù)包括屏幕分辨率、瀏覽器的窗口大小以及用戶當(dāng)前使用瀏覽器的類型；第二獲取單元，用于根據(jù)所述第一獲取單元獲取的所述屏幕顯示參數(shù)，獲取當(dāng)前頁面 的頁面文檔的高度和寬度；設(shè)置單元，用于根據(jù)所述第二獲取單元獲取的所述頁面文檔的高度和寬度以及所述頁 面文檔中固定區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度；調(diào)整單元，用于調(diào)整所述頁面文檔中固定區(qū)域的位置。
7.根據(jù)權(quán)利要求6所述的裝置，其特征在于，當(dāng)所述第一獲取單元獲取的屏幕顯示參 數(shù)中包含屏幕分辨率時(shí)，所述第二獲取單元包括第一計(jì)算模塊，用于根據(jù)所述屏幕顯示參數(shù)計(jì)算所述當(dāng)前瀏覽器窗口的高度和寬度；第一獲取模塊，用于獲取所述第一計(jì)算模塊得到的所述當(dāng)前瀏覽器窗口中地址欄、菜 單欄和狀態(tài)欄的高度之和、寬度之和；第二計(jì)算模塊，用于將所述第一計(jì)算模塊得到的所述當(dāng)前瀏覽器窗口的高度和寬度， 分別減去所述第一獲取模塊獲取的所述高度之和、所述寬度之和，得到所述頁面文檔的高 度和寬度。
8.根據(jù)權(quán)利要求6所述的裝置，其特征在于，當(dāng)所述第一獲取單元獲取的屏幕顯示參 數(shù)中包含瀏覽器的窗口大小時(shí)，所述第二獲取單元包括第二獲取模塊，用于獲取所述當(dāng)前瀏覽器窗口中地址欄、菜單欄和狀態(tài)欄的高度之和、 寬度之和；第三計(jì)算模塊，用于將所述當(dāng)前瀏覽器窗口的高度和寬度分別減去所述第二獲取模塊 獲取的所述高度之和、所述寬度之和，得到所述頁面文檔的高度和寬度。
9.根據(jù)權(quán)利要求6所述的裝置，其特征在于，當(dāng)所述第一獲取單元獲取的所述屏幕顯 示參數(shù)中包括所述用戶當(dāng)前使用瀏覽器的類型時(shí)，所述第二獲取單元包括確定模塊，用于根據(jù)所述瀏覽器的類型確定與所述瀏覽器的類型對應(yīng)的頁面布局中所 包含元素的樣式參數(shù)；第三獲取模塊，用于根據(jù)所述確定模塊確定的所述元素的樣式參數(shù)獲取當(dāng)前頁面的頁 面文檔的高度和寬度。
10.根據(jù)權(quán)利要求6所述的裝置，其特征在于，所述設(shè)置單元包括第二獲取模塊，用于獲取所述頁面文檔中固定區(qū)域的高度和寬度；第三計(jì)算模塊，用于將所述第二計(jì)算模塊計(jì)算得到的所述頁面文檔的高度和寬度，分 別減去所述頁面文檔中固定區(qū)域的高度和寬度，得到所述頁面文檔中可變區(qū)域的高度和寬 度；設(shè)置模塊，用于按照所述第三計(jì)算模塊計(jì)算得到所述頁面文檔中可變區(qū)域的高度和寬 度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度。
全文摘要
本發(fā)明實(shí)施例公開了一種頁面布局自適應(yīng)方法及裝置，涉及網(wǎng)頁設(shè)計(jì)領(lǐng)域，能夠在不同分別率的屏幕中、不同類型的瀏覽器中以及不同大小的瀏覽器窗口中，顯示相同的頁面內(nèi)容，方便用戶查看頁面內(nèi)容，提高了用戶體驗(yàn)。本發(fā)明方法包括獲取屏幕顯示參數(shù)，所述屏幕顯示參數(shù)為以下參數(shù)中的至少一個(gè)參數(shù)，該參數(shù)包括屏幕分辨率、瀏覽器的窗口大小以及用戶當(dāng)前使用瀏覽器的類型；根據(jù)所述屏幕顯示參數(shù)獲取當(dāng)前頁面的頁面文檔的高度和寬度；根據(jù)所述頁面文檔的高度和寬度以及所述頁面文檔中固定區(qū)域的高度和寬度，設(shè)置所述頁面文檔中可變區(qū)域的高度和寬度；調(diào)整所述頁面文檔中固定區(qū)域的位置。本發(fā)明實(shí)施例主要用于頁面的自適應(yīng)過程中。
文檔編號G06F17/30GK101908076SQ20101026190
公開日2010年12月8日 申請日期2010年8月24日 優(yōu)先權(quán)日2010年8月24日
發(fā)明者蔣晟, 薛明, 鄭小華 申請人:北京世紀(jì)高通科技有限公司