移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明公開了一種移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法及系統(tǒng)，方法包括：在Web應(yīng)用程序的頁面中嵌入擴(kuò)展樣式文件，擴(kuò)展樣式文件中保存有多個(gè)尺寸樣式以及與尺寸樣式對(duì)應(yīng)的尺寸信息，尺寸信息包括對(duì)應(yīng)設(shè)定的基準(zhǔn)分辨率的基準(zhǔn)尺寸信息；通過瀏覽器啟動(dòng)Web應(yīng)用程序并加載Web應(yīng)用程序的頁面；提取頁面中的擴(kuò)展樣式文件；獲取移動(dòng)終端的設(shè)備分辨率；利用基準(zhǔn)分辨率和設(shè)備分辨率，調(diào)整擴(kuò)展樣式文件中保存的所有尺寸樣式的尺寸信息；根據(jù)調(diào)整后的尺寸信息生成標(biāo)準(zhǔn)樣式文件；由瀏覽器根據(jù)標(biāo)準(zhǔn)樣式文件，刷新顯示頁面。應(yīng)用本發(fā)明，可輕易地達(dá)到動(dòng)態(tài)適配的目的，大大降低了界面適配的工作量，同時(shí)又能滿足對(duì)不同設(shè)備分辨率進(jìn)行精確界面適配的要求。
【專利說明】移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法及系統(tǒng)

【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及移動(dòng)互聯(lián)網(wǎng)【技術(shù)領(lǐng)域】，尤其涉及一種移動(dòng)終端上Web應(yīng)用程序的界面 動(dòng)態(tài)適配方法及系統(tǒng)。

【背景技術(shù)】
[0002] 移動(dòng)終端上Web應(yīng)用程序指的是基于Web技術(shù)來開發(fā)應(yīng)用程序的主體，直接運(yùn)行 在瀏覽器或者運(yùn)行于內(nèi)嵌瀏覽器控件，以app方式存在的應(yīng)用程序。
[0003] 目前市面上的移動(dòng)終端多達(dá)上千款，設(shè)備分辨率多種多樣，主流的設(shè)備分辨率有 240x320、320x480、480x800、540x640、640x960、720xl280、1080x1920 等，為了使同一種 Web 應(yīng)用程序能夠在具有不同的設(shè)備分辨率的移動(dòng)終端上進(jìn)行部署，開發(fā)者需要針對(duì)具有不同 的設(shè)備分辨率的移動(dòng)終端分別開發(fā)不同版本的Web應(yīng)用程序，即每種設(shè)備分辨率均對(duì)應(yīng)一 種樣式文件，在Web應(yīng)用程序運(yùn)行時(shí)，根據(jù)移動(dòng)終端的設(shè)備分辨率加載相對(duì)應(yīng)的樣式資源。
[0004] 上述適配方式的優(yōu)點(diǎn)是能夠針對(duì)每種設(shè)備分辨率進(jìn)行精確適配，缺陷在于適配工 作耗費(fèi)開發(fā)人員的大量時(shí)間和精力，開發(fā)、維護(hù)工作量大，并且Web應(yīng)用程序在未適配過的 設(shè)備分辨率的移動(dòng)終端上顯示錯(cuò)亂。


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

[0005] 為了解決現(xiàn)有技術(shù)中的缺陷，本發(fā)明提供了一種移動(dòng)終端上Web應(yīng)用程序的界面 動(dòng)態(tài)適配方法及系統(tǒng)，大大降低了界面適配的工作量，同時(shí)又能夠滿足對(duì)不同設(shè)備分辨率 進(jìn)行精確界面適配的要求。
[0006] 為實(shí)現(xiàn)上述目的，本發(fā)明的技術(shù)方案為：
[0007] -種移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法，包括：
[0008] 在Web應(yīng)用程序的頁面中嵌入擴(kuò)展樣式文件，所述擴(kuò)展樣式文件中保存有多個(gè)尺 寸樣式以及與所述尺寸樣式對(duì)應(yīng)的尺寸信息，所述尺寸信息包括對(duì)應(yīng)設(shè)定的基準(zhǔn)分辨率的 基準(zhǔn)尺寸信息；
[0009] 通過瀏覽器啟動(dòng)所述Web應(yīng)用程序并加載所述Web應(yīng)用程序的頁面；
[0010] 提取所述頁面中的擴(kuò)展樣式文件；
[0011] 獲取移動(dòng)終端的設(shè)備分辨率；
[0012] 利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所述擴(kuò)展樣式文件中保存的所有尺 寸樣式的尺寸信息，并根據(jù)調(diào)整后的尺寸信息生成標(biāo)準(zhǔn)樣式文件；
[0013] 由瀏覽器根據(jù)所述標(biāo)準(zhǔn)樣式文件，刷新顯示所述頁面。
[0014] 優(yōu)選的是，所述利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所述擴(kuò)展樣式文件 中保存的所有尺寸樣式的尺寸信息包括：
[0015] 根據(jù)所述移動(dòng)終端的設(shè)備分辨率和所述基準(zhǔn)分辨率，確定縮放比例；
[0016] 利用所述縮放比例，依次調(diào)整所述擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式的基準(zhǔn)尺 寸信息，并將調(diào)整后的基準(zhǔn)尺寸信息作為所述尺寸樣式的尺寸信息。
[0017] 優(yōu)選的是，所述根據(jù)所述移動(dòng)終端的設(shè)備分辨率和所述基準(zhǔn)分辨率，確定縮放比 例包括：
[0018] 計(jì)算所述設(shè)備分辨率的寬度與所述基準(zhǔn)分辨率的寬度的比值；
[0019] 將所述比值作為所述縮放比例。
[0020] 優(yōu)選的是，所述擴(kuò)展樣式文件中保存的一個(gè)或多個(gè)尺寸樣式的尺寸信息還包括對(duì) 應(yīng)特定設(shè)備分辨率的特定尺寸信息；所述利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所 述擴(kuò)展樣式文件中保存的所有尺寸樣式的尺寸信息還包括：
[0021] 在所述確定縮放比例之前，依次對(duì)所述擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式，檢 查所述尺寸樣式的尺寸信息是否包括特定設(shè)備分辨率，并且所述特定設(shè)備分辨率是否與所 述設(shè)備分辨率一致；
[0022] 如果是，則將對(duì)應(yīng)所述特定設(shè)備分辨率的特定尺寸信息作為所述尺寸樣式的尺寸 信息。
[0023] 優(yōu)選的是，所述檢查所述特定設(shè)備分辨率是否與所述設(shè)備分辨率一致包括：
[0024] 檢查所述特定設(shè)備分辨率的寬度是否等于所述設(shè)備分辨率的寬度；
[0025] 如果是，則確定所述特定設(shè)備分辨率與所述設(shè)備分辨率一致；
[0026] 否則，確定所述特定設(shè)備分辨率與所述設(shè)備分辨率不一致。
[0027] 優(yōu)選的是，所述擴(kuò)展樣式文件為CSS文件。
[0028] -種移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配系統(tǒng)，包括：
[0029] 存儲(chǔ)單元，用于存儲(chǔ)Web應(yīng)用程序的頁面；
[0030] 擴(kuò)展單元，用于在所述存儲(chǔ)單元保存的所述頁面中嵌入擴(kuò)展樣式文件，所述擴(kuò)展 樣式文件中保存有多個(gè)尺寸樣式以及與所述尺寸樣式對(duì)應(yīng)的尺寸信息，所述尺寸信息包括 對(duì)應(yīng)設(shè)定的基準(zhǔn)分辨率的基準(zhǔn)尺寸信息；
[0031] 瀏覽器，用于啟動(dòng)所述Web應(yīng)用程序并加載所述Web應(yīng)用程序的頁面；
[0032] 擴(kuò)展樣式文件提取單元，用于提取所述存儲(chǔ)單元保存的所述頁面中的擴(kuò)展樣式文 件；
[0033] 設(shè)備分辨率獲取單兀，用于獲取移動(dòng)終端的設(shè)備分辨率；
[0034] 調(diào)整單元，用于根據(jù)所述擴(kuò)展樣式文件提取單元提取的擴(kuò)展樣式文件中的基準(zhǔn)分 辨率和所述設(shè)備分辨率獲取單元獲取的設(shè)備分辨率，調(diào)整所述擴(kuò)展樣式文件中保存的所有 尺寸樣式的尺寸信息，并根據(jù)調(diào)整后的尺寸信息，生成標(biāo)準(zhǔn)樣式文件；
[0035] 所述瀏覽器，還用于根據(jù)所述調(diào)整單元生成的標(biāo)準(zhǔn)樣式文件，刷新顯示所述頁面。
[0036] 優(yōu)選的是，所述調(diào)整單元包括：
[0037] 縮放比例確定子單元，用于根據(jù)所述移動(dòng)終端的設(shè)備分辨率和所述基準(zhǔn)分辨率， 確定縮放比例；
[0038] 調(diào)整子單元，用于利用所述縮放比例確定子單元確定的縮放比例，依次調(diào)整所述 擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式的基準(zhǔn)尺寸信息，并將調(diào)整后的基準(zhǔn)尺寸信息作為所 述尺寸樣式的尺寸信息。
[0039] 優(yōu)選的是，所述縮放比例確定子單元，具體用于計(jì)算所述設(shè)備分辨率的寬度與所 述基準(zhǔn)分辨率的寬度的比值；將所述比值作為所述縮放比例。
[0040] 優(yōu)選的是，所述擴(kuò)展樣式文件中保存的一個(gè)或多個(gè)尺寸樣式的尺寸信息還包括對(duì) 應(yīng)特定設(shè)備分辨率的特定尺寸信息；所述調(diào)整單元還包括：
[0041] 檢查子單元，用于在所述縮放比例確定子單元確定縮放比例之前，依次對(duì)所述擴(kuò) 展樣式文件中保存的每個(gè)尺寸樣式，檢查所述尺寸樣式的尺寸信息是否包括特定設(shè)備分辨 率，并檢查所述特定設(shè)備分辨率是否與所述設(shè)備分辨率一致；
[0042] 特定尺寸確定子單元，用于在所述檢查子單元檢查到所述尺寸樣式的尺寸信息包 括特定設(shè)備分辨率，并且所述特定設(shè)備分辨率與所述設(shè)備分辨率一致時(shí)，將對(duì)應(yīng)所述特定 設(shè)備分辨率的特定尺寸信息作為所述尺寸樣式的尺寸信息。
[0043] 優(yōu)選的是，所述檢查子單元通過檢查所述特定設(shè)備分辨率的寬度是否等于所述設(shè) 備分辨率的寬度來確定所述特定設(shè)備分辨率與所述設(shè)備分辨率是否一致。
[0044] 優(yōu)選的是，所述擴(kuò)展樣式文件為CSS文件。
[0045] 本發(fā)明的有益效果在于，應(yīng)用本發(fā)明實(shí)施例移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài) 適配方法及系統(tǒng)，只需針對(duì)一套基準(zhǔn)分辨率進(jìn)行適配，在其它設(shè)備分辨率的移動(dòng)終端上運(yùn) 行時(shí)能夠自動(dòng)通過縮放比例或特定尺寸信息的調(diào)整方式調(diào)整樣式文件，即可輕易地達(dá)到動(dòng) 態(tài)適配的目的，大大降低了界面適配的工作量，同時(shí)又能夠滿足對(duì)不同設(shè)備分辨率進(jìn)行精 確界面適配的要求。

【專利附圖】

【附圖說明】
[0046] 圖1示出了本發(fā)明實(shí)施例移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法的流程 圖；
[0047] 圖2示出了本發(fā)明實(shí)施例中利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所述擴(kuò) 展樣式文件中保存的所有尺寸樣式的尺寸信息的一種流程圖；
[0048] 圖3示出了本發(fā)明實(shí)施例中利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所述擴(kuò) 展樣式文件中保存的所有尺寸樣式的尺寸信息的另一種流程圖；
[0049] 圖4示出了本發(fā)明實(shí)施例移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配系統(tǒng)的結(jié)構(gòu)示 意圖；
[0050] 圖5示出了本發(fā)明實(shí)施例中調(diào)整單元的一種結(jié)構(gòu)示意圖；
[0051] 圖6示出了本發(fā)明實(shí)施例中調(diào)整單元的另一種結(jié)構(gòu)示意圖。

【具體實(shí)施方式】
[0052] 下面詳細(xì)描述本發(fā)明的實(shí)施例，所述實(shí)施例的示例在附圖中示出，其中自始至終 相同或類似的標(biāo)號(hào)表示相同或類似的元件或具有相同或類似功能的元件。下面通過參考附 圖描述的實(shí)施例是示例性的，僅用于解釋本發(fā)明，而不能解釋為對(duì)本發(fā)明的限制。
[0053] 為了解決現(xiàn)有界面適配方法會(huì)耗費(fèi)開發(fā)人員的大量時(shí)間和精力，開發(fā)、維護(hù)工作 量大，并且Web應(yīng)用程序在未適配過的設(shè)備分辨率的移動(dòng)終端上顯示錯(cuò)亂的缺陷，本發(fā)明 實(shí)施例提出一種移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法及系統(tǒng)，大大降低了界面適 配的工作量，同時(shí)又能夠滿足對(duì)不同設(shè)備分辨率進(jìn)行精確界面適配的要求。
[0054] 如圖1所示，是本發(fā)明實(shí)施例移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法的流 程圖，所述動(dòng)態(tài)適配方法包括以下步驟：
[0055] 步驟101 :在Web應(yīng)用程序的頁面中嵌入擴(kuò)展樣式文件，所述擴(kuò)展樣式文件中保存 有多個(gè)尺寸樣式以及與所述尺寸樣式對(duì)應(yīng)的尺寸信息，所述尺寸信息包括對(duì)應(yīng)設(shè)定的基準(zhǔn) 分辨率的基準(zhǔn)尺寸信息。
[0056] 具體地，上述嵌入至Web應(yīng)用程序的頁面中的擴(kuò)展樣式文件中包括多個(gè)尺寸樣 式、對(duì)應(yīng)所述尺寸樣式的尺寸信息以及可選的至少一個(gè)非尺寸樣式，與尺寸樣式相對(duì)應(yīng)的 尺寸信息包括在基準(zhǔn)分辨率情況下的基準(zhǔn)尺寸信息，即：當(dāng)目標(biāo)移動(dòng)終端的屏幕分辨率為 基準(zhǔn)分辨率時(shí)，利用包括基準(zhǔn)尺寸信息的擴(kuò)展樣式文件刷新顯示所述頁面的效果是最佳 的。特別地，擴(kuò)展樣式文件優(yōu)選為CSS (Cascading Style Sheet,層疊樣式表單）文件。
[0057] 在頁面中嵌入擴(kuò)展樣式文件的方式可以采用與嵌入標(biāo)準(zhǔn)樣式文件同樣的方式，t匕 如：鏈入外部樣式表（即在頁面中用〈link〉標(biāo)記鏈接到該擴(kuò)展樣式文件，〈link〉標(biāo)記需要 放在頁面的〈head〉區(qū)內(nèi)）、內(nèi)部樣式表（即將擴(kuò)展樣式文件放到頁面的〈head〉區(qū)里，擴(kuò)展 樣式文件是用〈style〉標(biāo)記插入的）、導(dǎo)入外表樣式表（即在內(nèi)部樣式表的〈style〉里導(dǎo)入 擴(kuò)展樣式文件）等。
[0058] 步驟102 :通過瀏覽器啟動(dòng)所述Web應(yīng)用程序并加載所述Web應(yīng)用程序的頁面。
[0059] 具體地，所述瀏覽器為安裝在移動(dòng)終端上的瀏覽器，該瀏覽器用于啟動(dòng)Web應(yīng)用 程序并加載Web應(yīng)用程序的頁面，這里，瀏覽器加載頁面后是否顯示所述頁面，取決于Web 應(yīng)用程序內(nèi)的相應(yīng)設(shè)置，優(yōu)選地，為了用戶的瀏覽舒適性，瀏覽器在加載Web應(yīng)用程序的頁 面后不進(jìn)行顯示。所述瀏覽器在加載頁面后，根據(jù)由步驟103至步驟105生成的標(biāo)準(zhǔn)樣式 文件刷新顯示所述頁面，即直接顯示與移動(dòng)終端的屏幕相匹配的頁面。
[0060] 步驟103 :提取所述頁面中的擴(kuò)展樣式文件。
[0061] 步驟104 :獲取移動(dòng)終端的設(shè)備分辨率。
[0062] 步驟105 :利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所述擴(kuò)展樣式文件中保 存的所有尺寸樣式的尺寸信息，并根據(jù)調(diào)整后的尺寸信息生成標(biāo)準(zhǔn)樣式文件。
[0063] 具體地，所述調(diào)整所述擴(kuò)展樣式文件中保存的所有尺寸樣式的尺寸信息的方法將 在下文中結(jié)合圖2進(jìn)行詳細(xì)地闡述。
[0064] 另外，所述根據(jù)調(diào)整后的尺寸信息生成標(biāo)準(zhǔn)樣式文件的方法為：依次對(duì)擴(kuò)展樣式 文件中的每個(gè)尺寸樣式，將所述尺寸樣式的尺寸信息替換為相應(yīng)的調(diào)整后的尺寸信息，通 過此方式對(duì)擴(kuò)展樣式文件進(jìn)行調(diào)整，并將調(diào)整后的擴(kuò)展樣式文件稱為標(biāo)準(zhǔn)樣式文件。這里， 我們可以將標(biāo)準(zhǔn)樣式文件中的樣式內(nèi)容，看成是在當(dāng)前移動(dòng)終端的屏幕上刷新顯示所述 Web應(yīng)用程序的最佳樣式信息。
[0065] 步驟106 :由瀏覽器根據(jù)所述標(biāo)準(zhǔn)樣式文件，刷新顯示所述頁面。
[0066] 如圖2所示，是本發(fā)明實(shí)施例中利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所 述擴(kuò)展樣式文件中保存的所有尺寸樣式的尺寸信息的一種流程圖，所述調(diào)整所述擴(kuò)展樣式 文件中保存的所有尺寸樣式的尺寸信息的方法包括以下步驟：
[0067] 步驟201 :根據(jù)所述移動(dòng)終端的設(shè)備分辨率和所述基準(zhǔn)分辨率，確定縮放比例。 [0068] 具體地，所述確定縮放比例的方法為：計(jì)算所述設(shè)備分辨率的寬度與所述基準(zhǔn) 分辨率的寬度的比值；將所述比值作為所述縮放比例。例如，如果設(shè)定的基準(zhǔn)分辨率為 320pxX480pX，基準(zhǔn)分辨率的寬度為320px，設(shè)備分辨率（即當(dāng)前移動(dòng)終端屏幕的分辨 率）為480pxX800px，設(shè)備分辨率的寬度為480px，則可以得出縮放比例=^^ = !·5; 如果設(shè)備分辨率（即當(dāng)前移動(dòng)終端屏幕的分辨率）為640pxX960px，設(shè)備分辨率的寬度 為640px，則可以得出裝放比例=|^ = 2;如果設(shè)備分辨率的寬度720px，則可以得出 縮放比例=ig=2.25，其它設(shè)備分辨率以此類推。
[0069] 步驟202 :利用所述縮放比例，依次調(diào)整所述擴(kuò)展樣式文件中保存的每個(gè)尺寸樣 式的基準(zhǔn)尺寸信息，并將調(diào)整后的基準(zhǔn)尺寸信息作為所述尺寸樣式的尺寸信息。
[0070] 具體地，上述利用縮放比例，依次調(diào)整所述擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式 的基準(zhǔn)尺寸信息可以解釋為：利用縮放比例，依次對(duì)擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式 的基準(zhǔn)尺寸信息進(jìn)行比例縮放，即將每個(gè)尺寸樣式的基準(zhǔn)尺寸信息均乘以所述縮放比例。
[0071] 在本發(fā)明的一優(yōu)選的實(shí)施例中，所述擴(kuò)展樣式文件的內(nèi)容如下：
[0072] . main-item-icon {
[0073] vertical-align:middle ；
[0074] width:54dp ；
[0075] height :54dp ；
[0076] padding-top :4dp ；
[0077] padding-bottom:4dp ；
[0078] margin-left :6dp ；
[0079] margin-right:8dp ；}
[0080] 這里，dp是一種相對(duì)單位，其對(duì)應(yīng)的換算公式為dp = scale Xpx，其中px表示 像素單位，scale表示所述縮放比例。在本實(shí)施例中，設(shè)定基準(zhǔn)分辨率為320pxX480px， T20/7Y 設(shè)備分辨率的寬度720px，則可以得出縮放比例2.25 "從而，對(duì)于縮放比 例scale為2. 25的情況，上述擴(kuò)展樣式文件中保存的6種尺寸樣式：寬度（width)、高度 (height)、上內(nèi)邊距（padding-top)、下內(nèi)邊距（padding-bottom)、左邊距（margin-left) 和右邊距（margin-right)，對(duì)應(yīng)的尺寸信息依次被調(diào)整為：54X2. 25px = 121. 5px、 54Χ2·25ρχ = 121·5ρχ、4Χ2·25ρχ = 9ρχ、4Χ2·25ρχ = 9ρχ、6Χ2·25ρχ = 13·5ρχ 和 8X2. 25ρχ = 18ρχ，從而按照此種調(diào)整方式生成的標(biāo)準(zhǔn)樣式文件保存的6種尺寸樣式的尺 寸信息依次為：121. 5ρχ、121· 5ρχ、9ρχ、9ρχ、13· 5ρχ 和 18ρχ。
[0081] 在本發(fā)明的另一優(yōu)選的實(shí)施例中，為了使某些特定的尺寸樣式更好地適應(yīng)特定的 設(shè)備分辨率，將特定尺寸樣式的尺寸信息指定為特定尺寸信息。
[0082] 在本實(shí)施例中，在所述擴(kuò)展樣式文件中保存的一個(gè)或多個(gè)尺寸樣式的尺寸信息還 包括對(duì)應(yīng)特定設(shè)備分辨率的特定尺寸信息。例如，繼續(xù)使用上述擴(kuò)展樣式文件的實(shí)例，加入 特定尺寸信息的擴(kuò)展樣式文件的內(nèi)容如下：
[0083] · main-item-icon {
[0084] vertical-align:middle ；
[0085] width:54dp | 720:120px ；
[0086] height: 54dp | 720:120px ；
[0087] padding-top:4dp|720:lOpx ；
[0088] padding-bottom:4dpI 720:ΙΟρχ ;
[0089] margin-left:6dp|720:13px ；
[0090] margin-right:8dp ；}
[0091] 這里，擴(kuò)展樣式文件中的前5個(gè)尺寸信息：寬度（width)、高度（height)、上內(nèi)邊距 (padding-top)、下內(nèi)邊距（padding-bottom)和左邊距（margin-left)的尺寸信息中除了 帶有相對(duì)單位的尺寸信息之外，還包括對(duì)應(yīng)特定設(shè)備分辨率的特定尺寸信息，即：對(duì)應(yīng)寬度 (width)和高度（height)的特定尺寸信息均為720:120px，表示在特定設(shè)備分辨率（720px) 的條件下，寬度和高度的尺寸信息均具體特定為120px ;對(duì)應(yīng)上內(nèi)邊距（padding-top)下內(nèi) 邊距（padding-bottom)的特定尺寸信息均為720:10px，表示在特定設(shè)備分辨率（720px) 的條件下，上內(nèi)邊距和下內(nèi)邊距的尺寸信息均具體特定為l〇px;類似地，對(duì)應(yīng)左邊距 (margin-left)的特定尺寸信息為720:13px，表示在特定設(shè)備分辨率（720px)的條件下，左 邊距的尺寸信息具體特定為13px。
[0092] 如圖3所示，是本發(fā)明實(shí)施例中利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所 述擴(kuò)展樣式文件中保存的所有尺寸樣式的尺寸信息的另一種流程圖，所述調(diào)整所述擴(kuò)展樣 式文件中保存的所有尺寸樣式的尺寸信息的方法既包括步驟201和步驟202中所述的調(diào)整 方法，還包括以下步驟：
[0093] 步驟301 :在步驟201所述的確定縮放比例之前，依次對(duì)所述擴(kuò)展樣式文件中保存 的每個(gè)尺寸樣式，檢查所述尺寸樣式的尺寸信息是否包括特定設(shè)備分辨率，并且所述特定 設(shè)備分辨率是否與所述設(shè)備分辨率一致。
[0094] 具體地，在確定縮放比例之前，需要檢查擴(kuò)展樣式文件中是否存在特定尺寸樣式 (即該尺寸樣式的尺寸樣式中包括特定設(shè)備分辨率），并且在確定存在特定尺寸樣式的情 況下，需要進(jìn)一步檢查該特定尺寸樣式對(duì)應(yīng)的特定設(shè)備分辨率是否與當(dāng)前移動(dòng)終端的設(shè)備 分辨率相一致。
[0095] 所述檢查所述特定設(shè)備分辨率是否與所述設(shè)備分辨率一致的方法為：檢查所述特 定設(shè)備分辨率的寬度是否等于所述設(shè)備分辨率的寬度；如果是，則確定所述特定設(shè)備分辨 率與所述設(shè)備分辨率一致；否則，確定所述特定設(shè)備分辨率與所述設(shè)備分辨率不一致。 [0096] 步驟302 :如果所述尺寸樣式的尺寸信息包括特定設(shè)備分辨率，并且所述特定設(shè) 備分辨率與所述設(shè)備分辨率一致，則將對(duì)應(yīng)所述特定設(shè)備分辨率的特定尺寸信息作為所述 尺寸樣式的尺寸信息。
[0097] 具體地，在上述擴(kuò)展樣式文件的實(shí)例中，特定尺寸樣式分別為寬度、高度、上內(nèi)邊 距、下內(nèi)邊距和左邊距，若當(dāng)前移動(dòng)終端的設(shè)備分辨率的寬度為720px，則可以得出寬度、高 度、上內(nèi)邊距、下內(nèi)邊距和左邊距對(duì)應(yīng)的尺寸信息依次為120?1、120?1、10?1、10?1和13?1。 [0098] 如果所述尺寸樣式的尺寸信息未包括特定設(shè)備分辨率，或者所述特定設(shè)備分辨率 與所述設(shè)備分辨率不一致，則返回步驟201，順序執(zhí)行步驟201和步驟202。
[0099] 具體地，在上述擴(kuò)展樣式文件的實(shí)施例中，只有最后一個(gè)尺寸樣式不是特定尺寸 樣式，則該尺寸樣式（右邊距）的尺寸信息調(diào)整方式為步驟201和步驟202中所述的調(diào)整 方法，即右邊距的尺寸信息被調(diào)整為。
[0100] 因此，在上述擴(kuò)展樣式文件的實(shí)施例中，根據(jù)調(diào)整后的尺寸信息生成標(biāo)準(zhǔn)樣式文 件的內(nèi)容如下：
[0101] . main_item_icon{
[0102] vertical-align:middle ；
[0103] width: 120px ；
[0104] height: 120px ；
[0105] padding-top:lOpx ；
[0106] padding-bottom:lOpx ；
[0107] margin-left:13px ；
[0108] margin-right: 18px ；}
[0109] 生成標(biāo)準(zhǔn)樣式文件后，由瀏覽器根據(jù)所述標(biāo)準(zhǔn)樣式文件，刷新顯示所述頁面。
[0110] 可見，應(yīng)用本發(fā)明實(shí)施例移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法，只需針 對(duì)一套基準(zhǔn)分辨率進(jìn)行適配，在其它設(shè)備分辨率的移動(dòng)終端上運(yùn)行時(shí)能夠自動(dòng)通過縮放比 例或特定尺寸信息的調(diào)整方式調(diào)整樣式文件，即可輕易地達(dá)到動(dòng)態(tài)適配的目的，大大降低 了界面適配的工作量，同時(shí)又能夠滿足對(duì)不同設(shè)備分辨率進(jìn)行精確界面適配的要求。
[0111] 相應(yīng)地，本發(fā)明實(shí)施例還提供一種移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配系 統(tǒng)。
[0112] 如圖4所示，是本發(fā)明實(shí)施例移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配系統(tǒng)的結(jié) 構(gòu)示意圖，該系統(tǒng)包括：
[0113] 存儲(chǔ)單元401，用于存儲(chǔ)Web應(yīng)用程序的頁面；
[0114] 擴(kuò)展單元402,用于在所述存儲(chǔ)單元401保存的所述頁面中嵌入擴(kuò)展樣式文件，所 述擴(kuò)展樣式文件中保存有多個(gè)尺寸樣式以及與所述尺寸樣式對(duì)應(yīng)的尺寸信息，所述尺寸信 息包括對(duì)應(yīng)設(shè)定的基準(zhǔn)分辨率的基準(zhǔn)尺寸信息；所述擴(kuò)展樣式文件優(yōu)選為CSS文件；
[0115] 瀏覽器403,用于啟動(dòng)所述Web應(yīng)用程序并加載所述Web應(yīng)用程序的頁面；
[0116] 擴(kuò)展樣式文件提取單元404,用于提取所述存儲(chǔ)單元401保存的所述頁面中的擴(kuò) 展樣式文件；
[0117] 設(shè)備分辨率獲取單兀405,用于獲取移動(dòng)終端的設(shè)備分辨率；
[0118] 調(diào)整單元406,用于接收所述擴(kuò)展樣式文件提取單元404提取的擴(kuò)展樣式文件中 的基準(zhǔn)分辨率和所述設(shè)備分辨率獲取單元405獲取的所述設(shè)備分辨率，調(diào)整所述擴(kuò)展樣式 文件中保存的所有尺寸樣式的尺寸信息，并根據(jù)調(diào)整后的尺寸信息，生成標(biāo)準(zhǔn)樣式文件；
[0119] 所述瀏覽器403,還用于根據(jù)所述調(diào)整單元406生成的標(biāo)準(zhǔn)樣式文件，刷新顯示所 述頁面。
[0120] 如圖5所示，是本發(fā)明實(shí)施例中調(diào)整單元406的一種結(jié)構(gòu)示意圖，所述調(diào)整單元 406包括：
[0121] 縮放比例確定子單元501，用于根據(jù)所述移動(dòng)終端的設(shè)備分辨率和所述基準(zhǔn)分辨 率，確定縮放比例。所述縮放比例確定子單元501具體用于：計(jì)算所述設(shè)備分辨率的寬度與 所述基準(zhǔn)分辨率的寬度的比值；將所述比值作為所述縮放比例；
[0122] 調(diào)整子單元502,用于利用所述縮放比例確定子單元501確定的所述縮放比例，依 次調(diào)整所述擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式的基準(zhǔn)尺寸信息，并將調(diào)整后的基準(zhǔn)尺寸 信息作為所述尺寸樣式的尺寸信息。
[0123] 如圖6所示，是本發(fā)明實(shí)施例中調(diào)整單元406的另一種結(jié)構(gòu)示意圖，在本實(shí)施例 中，所述擴(kuò)展樣式文件中保存的一個(gè)或多個(gè)尺寸樣式的尺寸信息還包括對(duì)應(yīng)特定設(shè)備分辨 率的特定尺寸信息。相應(yīng)地，所述調(diào)整單元406除了包括上述縮放比例確定子單元501和 調(diào)整子單元502之外，還包括：
[0124] 檢查子單元601，用于在所述縮放比例確定子單元501確定縮放比例之前，依次對(duì) 所述擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式，檢查所述尺寸樣式的尺寸信息是否包括特定設(shè) 備分辨率，并檢查所述特定設(shè)備分辨率是否與所述設(shè)備分辨率一致；
[0125] 特定尺寸確定子單元602,用于在所述檢查子單元601檢查到所述尺寸樣式的尺 寸信息包括特定設(shè)備分辨率，并且所述特定設(shè)備分辨率與所述設(shè)備分辨率一致時(shí)，將對(duì)應(yīng) 所述特定設(shè)備分辨率的特定尺寸信息作為所述尺寸樣式的尺寸信息；在所述檢查子單元 601檢查到所述尺寸樣式的尺寸信息未包括特定設(shè)備分辨率，或者所述特定設(shè)備分辨率與 所述設(shè)備分辨率不一致時(shí)，通知所述縮放比例確定子單元501根據(jù)所述移動(dòng)終端的設(shè)備分 辨率和所述基準(zhǔn)分辨率，確定縮放比例。
[0126] 在實(shí)際應(yīng)用中，所述檢查子單元601可以通過檢查所述特定設(shè)備分辨率的寬度是 否等于所述設(shè)備分辨率的寬度來確定所述特定設(shè)備分辨率與所述設(shè)備分辨率是否一致。
[0127] 值得說明的是，上述各單元的具體處理過程可參照前面本發(fā)明實(shí)施例的方法中的 描述，在此不再贅述。
[0128] 綜上，應(yīng)用本發(fā)明實(shí)施例移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配系統(tǒng)，只需針 對(duì)一套基準(zhǔn)分辨率進(jìn)行適配，在其它設(shè)備分辨率的移動(dòng)終端上運(yùn)行時(shí)能夠自動(dòng)通過縮放比 例或特定尺寸信息的調(diào)整方式調(diào)整樣式文件，即可輕易地達(dá)到動(dòng)態(tài)適配的目的，大大降低 了界面適配的工作量，同時(shí)又能夠滿足對(duì)不同設(shè)備分辨率進(jìn)行精確界面適配的要求。
[0129] 以上所描述的系統(tǒng)實(shí)施例僅僅是示意性的，其中所述作為分離部件說明的單元可 以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單 元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實(shí)際的需要選擇其 中的部分或者全部模塊來實(shí)現(xiàn)本實(shí)施例方案的目的。本領(lǐng)域普通技術(shù)人員在不付出創(chuàng)造性 勞動(dòng)的情況下，即可以理解并實(shí)施。
[0130] 以上依據(jù)圖式所示的實(shí)施例詳細(xì)說明了本發(fā)明的構(gòu)造、特征及作用效果，以上所 述僅為本發(fā)明的較佳實(shí)施例，但本發(fā)明不以圖面所示限定實(shí)施范圍，凡是依照本發(fā)明的構(gòu) 想所作的改變，或修改為等同變化的等效實(shí)施例，仍未超出說明書與圖示所涵蓋的精神時(shí)， 均應(yīng)在本發(fā)明的保護(hù)范圍內(nèi)。
【權(quán)利要求】
1. 一種移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配方法，其特征在于，包括： 在Web應(yīng)用程序的頁面中嵌入擴(kuò)展樣式文件，所述擴(kuò)展樣式文件中保存有多個(gè)尺寸樣 式以及與所述尺寸樣式對(duì)應(yīng)的尺寸信息，所述尺寸信息包括對(duì)應(yīng)設(shè)定的基準(zhǔn)分辨率的基準(zhǔn) 尺寸信息； 通過瀏覽器啟動(dòng)所述Web應(yīng)用程序并加載所述Web應(yīng)用程序的頁面； 提取所述頁面中的擴(kuò)展樣式文件； 獲取移動(dòng)終端的設(shè)備分辨率； 利用所述基準(zhǔn)分辨率和所述設(shè)備分辨率，調(diào)整所述擴(kuò)展樣式文件中保存的所有尺寸樣 式的尺寸信息，并根據(jù)調(diào)整后的尺寸信息生成標(biāo)準(zhǔn)樣式文件； 由瀏覽器根據(jù)所述標(biāo)準(zhǔn)樣式文件，刷新顯示所述頁面。
2. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述利用所述基準(zhǔn)分辨率和所述設(shè)備分 辨率，調(diào)整所述擴(kuò)展樣式文件中保存的所有尺寸樣式的尺寸信息包括： 根據(jù)所述移動(dòng)終端的設(shè)備分辨率和所述基準(zhǔn)分辨率，確定縮放比例； 利用所述縮放比例，依次調(diào)整所述擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式的基準(zhǔn)尺寸信 息，并將調(diào)整后的基準(zhǔn)尺寸信息作為所述尺寸樣式的尺寸信息。
3. 根據(jù)權(quán)利要求2所述的方法，其特征在于，所述根據(jù)所述移動(dòng)終端的設(shè)備分辨率和 所述基準(zhǔn)分辨率，確定縮放比例包括： 計(jì)算所述設(shè)備分辨率的寬度與所述基準(zhǔn)分辨率的寬度的比值； 將所述比值作為所述縮放比例。
4. 根據(jù)權(quán)利要求2所述的方法，其特征在于，所述擴(kuò)展樣式文件中保存的一個(gè)或多個(gè) 尺寸樣式的尺寸信息還包括對(duì)應(yīng)特定設(shè)備分辨率的特定尺寸信息；所述利用所述基準(zhǔn)分辨 率和所述設(shè)備分辨率，調(diào)整所述擴(kuò)展樣式文件中保存的所有尺寸樣式的尺寸信息還包括： 在所述確定縮放比例之前，依次對(duì)所述擴(kuò)展樣式文件中保存的每個(gè)尺寸樣式，檢查所 述尺寸樣式的尺寸信息是否包括特定設(shè)備分辨率，并且所述特定設(shè)備分辨率是否與所述設(shè) 備分辨率一致； 如果是，則將對(duì)應(yīng)所述特定設(shè)備分辨率的特定尺寸信息作為所述尺寸樣式的尺寸信 息。
5. 根據(jù)權(quán)利要求4所述的方法，其特征在于，所述檢查所述特定設(shè)備分辨率是否與所 述設(shè)備分辨率一致包括： 檢查所述特定設(shè)備分辨率的寬度是否等于所述設(shè)備分辨率的寬度； 如果是，則確定所述特定設(shè)備分辨率與所述設(shè)備分辨率一致； 否則，確定所述特定設(shè)備分辨率與所述設(shè)備分辨率不一致。
6. 根據(jù)權(quán)利要求1至5任一項(xiàng)所述的方法，其特征在于，所述擴(kuò)展樣式文件為CSS文 件。
7. -種移動(dòng)終端上Web應(yīng)用程序的界面動(dòng)態(tài)適配系統(tǒng)，其特征在于，包括： 存儲(chǔ)單元，用于存儲(chǔ)Web應(yīng)用程序的頁面； 擴(kuò)展單元，用于在所述存儲(chǔ)單元保存的所述頁面中嵌入擴(kuò)展樣式文件，所述擴(kuò)展樣式 文件中保存有多個(gè)尺寸樣式以及與所述尺寸樣式對(duì)應(yīng)的尺寸信息，所述尺寸信息包括對(duì)應(yīng) 設(shè)定的基準(zhǔn)分辨率的基準(zhǔn)尺寸信息； 瀏覽器，用于啟動(dòng)所述Web應(yīng)用程序并加載所述Web應(yīng)用程序的頁面； 擴(kuò)展樣式文件提取單元，用于提取所述存儲(chǔ)單元保存的所述頁面中的擴(kuò)展樣式文件； 設(shè)備分辨率獲取單元，用于獲取移動(dòng)終端的設(shè)備分辨率； 調(diào)整單元，用于根據(jù)所述擴(kuò)展樣式文件提取單元提取的擴(kuò)展樣式文件中的基準(zhǔn)分辨率 和所述設(shè)備分辨率獲取單元獲取的設(shè)備分辨率，調(diào)整所述擴(kuò)展樣式文件中保存的所有尺寸 樣式的尺寸信息，并根據(jù)調(diào)整后的尺寸信息，生成標(biāo)準(zhǔn)樣式文件； 所述瀏覽器，還用于根據(jù)所述調(diào)整單元生成的標(biāo)準(zhǔn)樣式文件，刷新顯示所述頁面。
8. 根據(jù)權(quán)利要求1所述的系統(tǒng)，其特征在于，所述調(diào)整單元包括： 縮放比例確定子單元，用于根據(jù)所述移動(dòng)終端的設(shè)備分辨率和所述基準(zhǔn)分辨率，確定 縮放比例； 調(diào)整子單元，用于利用所述縮放比例確定子單元確定的縮放比例，依次調(diào)整所述擴(kuò)展 樣式文件中保存的每個(gè)尺寸樣式的基準(zhǔn)尺寸信息，并將調(diào)整后的基準(zhǔn)尺寸信息作為所述尺 寸樣式的尺寸信息。
9. 根據(jù)權(quán)利要求8所述的系統(tǒng)，其特征在于，所述縮放比例確定子單元，具體用于計(jì)算 所述設(shè)備分辨率的寬度與所述基準(zhǔn)分辨率的寬度的比值；將所述比值作為所述縮放比例。
10. 根據(jù)權(quán)利要求8所述的系統(tǒng)，其特征在于，所述擴(kuò)展樣式文件中保存的一個(gè)或多個(gè) 尺寸樣式的尺寸信息還包括對(duì)應(yīng)特定設(shè)備分辨率的特定尺寸信息；所述調(diào)整單元還包括： 檢查子單元，用于在所述縮放比例確定子單元確定縮放比例之前，依次對(duì)所述擴(kuò)展樣 式文件中保存的每個(gè)尺寸樣式，檢查所述尺寸樣式的尺寸信息是否包括特定設(shè)備分辨率， 并檢查所述特定設(shè)備分辨率是否與所述設(shè)備分辨率一致； 特定尺寸確定子單元，用于在所述檢查子單元檢查到所述尺寸樣式的尺寸信息包括特 定設(shè)備分辨率，并且所述特定設(shè)備分辨率與所述設(shè)備分辨率一致時(shí)，將對(duì)應(yīng)所述特定設(shè)備 分辨率的特定尺寸信息作為所述尺寸樣式的尺寸信息。
11. 根據(jù)權(quán)利要求10所述的系統(tǒng)，其特征在于， 所述檢查子單元通過檢查所述特定設(shè)備分辨率的寬度是否等于所述設(shè)備分辨率的寬 度來確定所述特定設(shè)備分辨率與所述設(shè)備分辨率是否一致。
12. 根據(jù)權(quán)利要求7至11任一項(xiàng)所述的系統(tǒng)，其特征在于，所述擴(kuò)展樣式文件為CSS文 件。
【文檔編號(hào)】G06F3/0484GK104063148SQ201410259192
【公開日】2014年9月24日 申請(qǐng)日期:2014年6月11日 優(yōu)先權(quán)日:2014年6月11日
【發(fā)明者】黃明登 申請(qǐng)人:科大訊飛股份有限公司