一種網(wǎng)頁的顯示適配方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明提供了一種網(wǎng)頁的顯示適配方法及系統(tǒng)，涉及移動(dòng)設(shè)備屏幕適配技術(shù)領(lǐng)域。該方法包括：在HTML5網(wǎng)頁中加載一個(gè)屏幕適配器，屏幕適配器是獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件；通過屏幕適配器獲取HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息；根據(jù)當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算HTML5網(wǎng)頁的縮放比例值；根據(jù)縮放比例值對(duì)HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML網(wǎng)頁。本發(fā)明只需開發(fā)一套UI結(jié)構(gòu)圖，即可使HTML5頁面實(shí)現(xiàn)與各種尺寸的移動(dòng)設(shè)備屏幕之間的無縫適配，精簡(jiǎn)了程序代碼，節(jié)省了開發(fā)人力，并且提高了程序運(yùn)行效率。
【專利說明】
一種網(wǎng)頁的顯示適配方法及系統(tǒng)
技術(shù)領(lǐng)域
[0001]本發(fā)明屬于移動(dòng)終端屏幕適配技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁的顯示適配方法及系統(tǒng)。
【背景技術(shù)】
[0002]隨著HTML5的持續(xù)火熱，移動(dòng)設(shè)備市場(chǎng)涌現(xiàn)出了大量基于HTML5開發(fā)的移動(dòng)APP。由于移動(dòng)市場(chǎng)的高速發(fā)展，移動(dòng)設(shè)備的快速更新，使得市場(chǎng)上出現(xiàn)了種類繁多具有各種屏幕尺寸的移動(dòng)設(shè)備，開發(fā)者在開發(fā)HTML5應(yīng)用時(shí)就必須考慮所有屏幕尺寸的應(yīng)用場(chǎng)景，為移動(dòng)應(yīng)用做屏幕尺寸的適配工作。
[0003]HTML5是基于瀏覽器的網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)和開發(fā)技術(shù)，在開發(fā)兼容各類移動(dòng)設(shè)備屏幕尺寸的時(shí)候，通常的做法是選擇一款目標(biāo)用戶多的、屏幕尺寸適中的機(jī)型作為UI的設(shè)計(jì)原型，然后向上、向下兼容，設(shè)計(jì)出大、中、小三款界面，并將設(shè)計(jì)出的三款界面交給程序開發(fā)人員，由程序開發(fā)人員根據(jù)移動(dòng)設(shè)備的屏幕尺寸進(jìn)行布局，并在瀏覽器上調(diào)試和展現(xiàn)界面。HTML5的CCS技術(shù)可以實(shí)現(xiàn)上述方案，它的一般實(shí)現(xiàn)過程如下:
[0004]選擇一款屏幕尺寸，并根據(jù)該屏幕尺寸設(shè)計(jì)UI結(jié)構(gòu)圖；
[0005]定義屏幕尺寸向上、向下的適配形式，并設(shè)計(jì)與之對(duì)應(yīng)的多套UI結(jié)構(gòu)圖；
[0006]將各UI結(jié)構(gòu)圖切圖打包成各適配版本的切圖包；
[0007]HTML5應(yīng)用程序裝載各版本切圖包；
[0008]HTML5應(yīng)用加載到移動(dòng)設(shè)備APP或者移動(dòng)設(shè)備瀏覽器；
[0009]CCS媒體Omedia screen查詢移動(dòng)設(shè)備屏幕尺寸并適配相應(yīng)的切圖包；
[0010]HTML5完成界面渲染。
[0011]然而，上述基于CCS技術(shù)實(shí)現(xiàn)HTML5網(wǎng)頁的屏幕適配方法存在以下缺陷:
[0012](I)需要設(shè)計(jì)多套UI結(jié)構(gòu)圖，并且每套UI結(jié)構(gòu)圖還需要進(jìn)行切圖，使得工作量較大，并且程序運(yùn)行效率較低；
[0013](2)由于移動(dòng)終端設(shè)備的屏幕尺寸差異多，通過設(shè)計(jì)多套UI結(jié)構(gòu)圖只能適用于屏幕尺寸較接近的移動(dòng)設(shè)備，經(jīng)常會(huì)在具有特殊屏幕尺寸的移動(dòng)設(shè)備中出現(xiàn)顯示界面中元素之間的相對(duì)距離不協(xié)調(diào)等情況，不能實(shí)現(xiàn)無縫適配。

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

[0014]本發(fā)明實(shí)施例的目的在于提供一種網(wǎng)頁的顯示適配方法及系統(tǒng)，旨在解決上述基于CCS技術(shù)實(shí)現(xiàn)HTML5網(wǎng)頁的屏幕適配方法存在的工作量較大、程序運(yùn)行效率低以及不能實(shí)現(xiàn)無縫適配的問題。
[0015]本發(fā)明實(shí)施例是這樣實(shí)現(xiàn)的，一種網(wǎng)頁的顯示適配方法，包括:
[0016]在HTML5網(wǎng)頁中加載一個(gè)屏幕適配器，所述屏幕適配器是獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件；
[0017]通過所述屏幕適配器獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息；
[0018]根據(jù)所述當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算所述HTML5網(wǎng)頁的縮放比例值；
[0019]根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML網(wǎng)頁。
[0020]在本發(fā)明實(shí)施例所述的網(wǎng)頁的顯示適配方法中，通過所述屏幕適配器獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息具體包括:
[0021 ] 通過所述屏幕適配器遍歷所述HTML5網(wǎng)頁中的DOM對(duì)象；
[0022]在所述HTML網(wǎng)頁的源代碼中查找到u1-width標(biāo)簽，并獲取所述u1-width標(biāo)簽下定義的UI結(jié)構(gòu)圖的尺寸信息。
[0023]在本發(fā)明實(shí)施例所述的網(wǎng)頁的顯示適配方法中，通過所述屏幕適配器獲取移動(dòng)設(shè)備的屏幕尺寸信息具體包括:
[0024]通過所述屏幕適配器設(shè)置所述HTML5網(wǎng)頁的meta標(biāo)簽，將當(dāng)前移動(dòng)設(shè)備的屏幕寬度賦值給所述HTML5網(wǎng)頁的視圖窗口，通過讀取所述視圖窗口的寬度值獲取所述移動(dòng)設(shè)備的屏幕尺寸信息。
[0025]在本發(fā)明實(shí)施例所述的網(wǎng)頁的顯示適配方法中，所述根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML網(wǎng)頁具體包括:
[0026]根據(jù)所述縮放比例值重構(gòu)所述HTML5網(wǎng)頁的meta標(biāo)簽；
[0027]將重構(gòu)后的meta標(biāo)簽動(dòng)態(tài)添加到所述HTML5網(wǎng)頁的源代碼的頭標(biāo)簽內(nèi)；
[0028]通過修改后的源代碼重新加載HTML5網(wǎng)頁的DOM對(duì)象和UI結(jié)構(gòu)圖，以顯示適配后的HTML5網(wǎng)頁。
[0029]在本發(fā)明實(shí)施例所述的網(wǎng)頁的顯示適配方法中，所述根據(jù)所述縮放比例值重構(gòu)所述HTML5網(wǎng)頁的meta標(biāo)簽具體包括:
[0030]創(chuàng)建一個(gè)新的meta標(biāo)簽；
[0031]設(shè)置所述HTML5網(wǎng)頁的視圖窗口；
[0032]將所述移動(dòng)設(shè)備的屏幕尺寸信息賦值給所述視圖窗口；
[0033]根據(jù)所述縮放比例值設(shè)置所述視圖窗口的縮放比例。
[0034]本發(fā)明實(shí)施例的另一目的在于提供一種網(wǎng)頁的顯示適配系統(tǒng)，包括屏幕適配器和屏幕適配器加載模塊，所述屏幕適配器是獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件包括尺寸信息獲取模塊、縮放比例計(jì)算模塊和網(wǎng)頁縮放模塊，其中:
[0035]所述屏幕適配器加載模塊，用于在HTML5網(wǎng)頁中加載所述屏幕適配器；
[0036]所述尺寸信息獲取模塊，用于獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息；
[0037]所述縮放比例計(jì)算模塊，用于根據(jù)所述當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算所述HTML5網(wǎng)頁的縮放比例值；
[0038]所述網(wǎng)頁縮放模塊，用于根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML網(wǎng)頁。
[0039]在本發(fā)明實(shí)施例所述的網(wǎng)頁的顯示適配系統(tǒng)中，所述尺寸信息獲取模塊具體用于:
[0040]遍歷所述HTML5網(wǎng)頁中的DOM對(duì)象；[0041 ] 在所述HTML網(wǎng)頁的源代碼中查找到u1-width標(biāo)簽，并獲取所述u1-width標(biāo)簽下定義的UI結(jié)構(gòu)圖的尺寸信息。
[0042]在本發(fā)明實(shí)施例所述的網(wǎng)頁的顯示適配系統(tǒng)中，所述尺寸信息獲取模塊具體用于:
[0043]設(shè)置所述HTML5網(wǎng)頁的meta標(biāo)簽，將當(dāng)前移動(dòng)設(shè)備的屏幕寬度賦值給所述HTML5網(wǎng)頁的視圖窗口，通過讀取所述視圖窗口的寬度值獲取所述移動(dòng)設(shè)備的屏幕尺寸信息。
[0044]在本發(fā)明實(shí)施例所述的網(wǎng)頁的顯示適配系統(tǒng)中，所述網(wǎng)頁縮放模塊具體包括:
[0045]meta標(biāo)簽重構(gòu)單元，用于根據(jù)所述縮放比例重構(gòu)所述HTML5網(wǎng)頁的meta標(biāo)簽；
[0046]源代碼修改單元，用于將重構(gòu)后的meta標(biāo)簽動(dòng)態(tài)添加到所述HTML5網(wǎng)頁的源代碼的頭標(biāo)簽內(nèi)；
[0047]網(wǎng)頁內(nèi)容加載單元，用于通過修改后的源代碼重新加載HTML5網(wǎng)頁的DOM對(duì)象和UI結(jié)構(gòu)圖，以顯示適配后的HTML5網(wǎng)頁。
[0048]在本發(fā)明實(shí)施例所述的網(wǎng)頁的顯示適配系統(tǒng)中，所述meta標(biāo)簽重構(gòu)單元具體用于:
[0049]創(chuàng)建一個(gè)新的meta標(biāo)簽；
[0050 ] 設(shè)置所述HTML5網(wǎng)頁的視圖窗口；
[0051]將所述移動(dòng)設(shè)備的屏幕尺寸信息賦值給所述視圖窗口；
[0052]根據(jù)所述縮放比例值設(shè)置所述視圖窗口的縮放比例。
[0053]實(shí)施本發(fā)明實(shí)施例提供的一種網(wǎng)頁的顯示適配方法及系統(tǒng)具有以下有益效果:
[0054]本發(fā)明實(shí)施例由于首先在HTML5網(wǎng)頁中加載一個(gè)屏幕適配器，所述屏幕適配器是獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件;然后通過所述屏幕適配器獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息;根據(jù)所述當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算所述HTML5網(wǎng)頁的縮放比例值;最后根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML網(wǎng)頁，從而使得軟件開發(fā)工程師只需開發(fā)一套UI結(jié)構(gòu)圖，即可使HTML5頁面實(shí)現(xiàn)與各種尺寸的移動(dòng)設(shè)備屏幕之間的無縫適配，精簡(jiǎn)了程序代碼，節(jié)省了開發(fā)人力，并且提高了程序運(yùn)行效率。
【附圖說明】
[0055]圖1是本發(fā)明實(shí)施例提供的一種網(wǎng)頁的顯示適配方法的具體實(shí)現(xiàn)流程圖；
[0056]圖2是本發(fā)明實(shí)施例提供的一種網(wǎng)頁的顯示適配方法中S104的具體實(shí)現(xiàn)流程圖；
[0057]圖3是本發(fā)明實(shí)施例提供的一種網(wǎng)頁的顯示適配方法應(yīng)用在具有不同屏幕尺寸的移動(dòng)設(shè)備上時(shí)HTML5網(wǎng)頁的適配效果圖；
[0058]圖4本發(fā)明實(shí)施例提供的一種網(wǎng)頁的顯示適配系統(tǒng)的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0059]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0060]圖1是本發(fā)明實(shí)施例提供的一種網(wǎng)頁的顯示適配方法的具體實(shí)現(xiàn)流程圖。參見圖1所示，本實(shí)施例提供的一種網(wǎng)頁的顯示適配方法，包括:
[0061]在SlOl中，在HTML5網(wǎng)頁中加載一個(gè)屏幕適配器，所述屏幕適配器是獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件。
[0062]在本實(shí)施例中，所述屏幕適配器是掛載在HTML5網(wǎng)頁中的一個(gè)獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件，可以被任意網(wǎng)頁調(diào)用。其中，所述移動(dòng)設(shè)備包括但不限于具有屏幕顯示功能的手機(jī)、平板或者其他智能終端。
[0063]在S102中，通過所述屏幕適配器獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息。
[0064]在本實(shí)施例中，在對(duì)HTML5網(wǎng)頁進(jìn)行編碼處理時(shí)會(huì)增加一個(gè)隱藏標(biāo)簽〈input type=〃hidden〃id = 〃ui_width〃name = 〃ui_width〃value = 〃640px〃>，用于描述當(dāng)前UI結(jié)構(gòu)圖的寬度。其中，通過所述屏幕適配器獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息具體包括:通過所述屏幕適配器遍歷所述HTML5網(wǎng)頁中的DOM對(duì)象，以在所述HTML網(wǎng)頁的源代碼中查找到u1-width標(biāo)簽，并獲取所述u1-width標(biāo)簽下定義的UI結(jié)構(gòu)圖的尺寸信息。優(yōu)選的，所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖尺寸寬度自定義為640像素。
[0065]在本實(shí)施例中，通過所述屏幕適配器獲取移動(dòng)設(shè)備的屏幕尺寸信息具體包括:通過所述屏幕適配器設(shè)置所述HTML5網(wǎng)頁的meta標(biāo)簽，將當(dāng)前移動(dòng)設(shè)備的屏幕寬度賦值給所述HTML5網(wǎng)頁的視圖窗口，通過讀取所述視圖窗口的寬度值獲取所述移動(dòng)設(shè)備的屏幕尺寸信息。具體的，通過加載HTML5網(wǎng)頁的原生met a標(biāo)簽，在原生meta標(biāo)簽中設(shè)置name =“viewport” content= “width = device_width”屬性，將當(dāng)前移動(dòng)設(shè)備的屏幕寬度賦值給HTML5網(wǎng)頁的視圖窗口，然后通過window.1nnerwidth調(diào)用視圖窗口的寬度值，并將該寬度值賦值給自定義變量device-width，這樣既可獲得當(dāng)前移動(dòng)設(shè)備的屏幕寬度即所述移動(dòng)設(shè)備的屏幕尺寸信息。
[0066]在S103中，根據(jù)所述當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算所述HTML5網(wǎng)頁的縮放比例值。
[0067]在本實(shí)施例中，所述HTML5網(wǎng)頁的縮放比例值=移動(dòng)設(shè)備屏幕寬度/UI結(jié)構(gòu)圖寬度，即:seal e = devi ce-width/u1-width;假設(shè) device-width = 420，u1-width = 640，則縮放比例scale = 0.65625。
[0068]在S104中，根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML網(wǎng)頁。
[0069]作為一具體實(shí)現(xiàn)示例，圖2示出了S104的具體實(shí)現(xiàn)流程。參見圖2所示，S104的實(shí)現(xiàn)流程詳述如下:
[0070]在S201中，根據(jù)所述縮放比例重構(gòu)所述HTML5網(wǎng)頁的meta標(biāo)簽。
[0071]在本實(shí)施例中，S201具體包括:
[0072]//創(chuàng)建一個(gè)HTML5網(wǎng)頁meta標(biāo)簽:
[0073]var fileref=document.createElement('meta')；
[0074]//設(shè)置所述HTML5網(wǎng)頁的視圖窗口，其中視圖窗口是一種顯示網(wǎng)頁文檔的區(qū)域:
[0075]fileref.setAttribute("name","viewport")；
[0076]//將移動(dòng)設(shè)備的屏幕尺寸信息給視圖窗口，根據(jù)所述縮放比例值設(shè)置所述視圖窗口的縮放比例，禁止用戶手動(dòng)縮放:
[0077]fileref ? setAttribute(’’content 〃，’’width = device-width，initial-scal e = 〃+scale+〃，user-scalable = no〃)。[〇〇78] 在S202中，將重構(gòu)后的meta標(biāo)簽動(dòng)態(tài)添加到所述HTML5網(wǎng)頁的源代碼的頭標(biāo)簽內(nèi)。 [〇〇79] 在本實(shí)施例中，具體通過以下代碼將重構(gòu)后的meta標(biāo)簽動(dòng)態(tài)添加到所述HTML5網(wǎng)頁的源代碼的頭標(biāo)簽內(nèi):
[0080] document?getElementsByTagName("head")[0].appendChiId(fileref)〇[〇〇81 ]在S203中，通過修改后的源代碼重新加載HTML5網(wǎng)頁的DOM對(duì)象和UI結(jié)構(gòu)圖，并顯示適配后的HTML5網(wǎng)頁。
[0082]圖3示出了本實(shí)施例在智能手機(jī)、寬屏智能手機(jī)以及窄屏智能手機(jī)上應(yīng)用時(shí)顯示的HTML5網(wǎng)頁適配效果圖，從圖3可以看出上述三種手機(jī)屏幕尺寸雖然有差別，但是UI的結(jié)構(gòu)和顯示效果不會(huì)發(fā)生改變。[〇〇83]以上可以看出，本實(shí)施例提供的一種網(wǎng)頁的顯示適配方法由于首先在HTML5網(wǎng)頁中加載一個(gè)屏幕適配器，所述屏幕適配器是獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件;然后通過所述屏幕適配器獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息;根據(jù)所述當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算所述HTML5網(wǎng)頁的縮放比例值；最后根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的 HTML網(wǎng)頁，從而使得軟件開發(fā)工程師只需開發(fā)一套UI結(jié)構(gòu)圖，即可使HTML5頁面實(shí)現(xiàn)與各種尺寸的移動(dòng)設(shè)備屏幕之間的無縫適配，精簡(jiǎn)了程序代碼，節(jié)省了開發(fā)人力，并且提高了程序運(yùn)行效率。
[0084]圖4是本發(fā)明實(shí)施例提供的一種網(wǎng)頁的顯示適配系統(tǒng)的結(jié)構(gòu)示意圖，該系統(tǒng)位于本發(fā)明實(shí)施例所述的移動(dòng)設(shè)備中，用于運(yùn)行圖1所示實(shí)施例提供的方法。為了便于說明，僅僅不出了與本實(shí)施例相關(guān)的部分。[〇〇85]參見圖4所示，本實(shí)施例提供的一種網(wǎng)頁的顯示適配系統(tǒng)，包括屏幕適配器2和屏幕適配器加載模塊1，所述屏幕適配器2是一個(gè)獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件包括尺寸信息獲取模塊21、縮放比例計(jì)算模塊22和網(wǎng)頁縮放模塊23,其中:
[0086]所述屏幕適配器加載模塊1，用于在HTML5網(wǎng)頁中加載所述屏幕適配器；[〇〇87]所述尺寸信息獲取模塊21，用于獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息；
[0088]所述縮放比例計(jì)算模塊22,用于根據(jù)所述當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算所述HTML5網(wǎng)頁的縮放比例值；
[0089]所述網(wǎng)頁縮放模塊23,用于根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放， 并顯示適配后的HTML網(wǎng)頁。
[0090]可選的，所述尺寸信息獲取模塊21具體用于:
[0091]遍歷所述HTML5網(wǎng)頁中的D0M對(duì)象；
[0092]在所述HTML網(wǎng)頁的源代碼中查找到u1-width標(biāo)簽，并獲取所述u1-width標(biāo)簽下定義的UI結(jié)構(gòu)圖的尺寸信息。
[0093]可選的，所述尺寸信息獲取模塊21具體用于:[〇〇94]設(shè)置所述HTML5網(wǎng)頁的meta標(biāo)簽，將當(dāng)前移動(dòng)設(shè)備的屏幕寬度賦值給所述HTML5網(wǎng)頁的視圖窗口，通過讀取所述視圖窗口的寬度值獲取所述移動(dòng)設(shè)備的屏幕尺寸信息。
[0095]可選的，所述網(wǎng)頁縮放模塊23具體包括:[0〇96] meta標(biāo)簽重構(gòu)單元231，用于根據(jù)所述縮放比例重構(gòu)所述HTML5網(wǎng)頁的meta標(biāo)簽； [〇〇97] 源代碼修改單元232,用于將重構(gòu)后的meta標(biāo)簽動(dòng)態(tài)添加到所述HTML5網(wǎng)頁的源代碼的頭標(biāo)簽內(nèi)；[〇〇98]網(wǎng)頁內(nèi)容加載單元233,用于通過修改后的源代碼重新加載HTML5網(wǎng)頁的D0M對(duì)象和UI結(jié)構(gòu)圖，以顯示適配后的HTML5網(wǎng)頁。[〇〇99] 可選的，所述meta標(biāo)簽重構(gòu)單元231具體用于:[〇1〇〇] 創(chuàng)建一個(gè)新的meta標(biāo)簽；
[0101]設(shè)置所述HTML5網(wǎng)頁的視圖窗口；
[0102]將所述移動(dòng)設(shè)備的屏幕尺寸信息賦值給所述視圖窗口；
[0103]根據(jù)所述縮放比例值設(shè)置所述視圖窗口的縮放比例。[〇1〇4]需要說明的是，本發(fā)明實(shí)施例提供的上述系統(tǒng)中各個(gè)模塊，由于與本發(fā)明方法實(shí)施例基于同一構(gòu)思，其帶來的技術(shù)效果與本發(fā)明方法實(shí)施例相同，具體內(nèi)容可參見本發(fā)明方法實(shí)施例中的敘述，此處不再贅述。
[0105]因此，可以看出本實(shí)施例提供的一種網(wǎng)頁的顯示適配系統(tǒng)同樣只需開發(fā)一套UI結(jié)構(gòu)圖，即可使HTML5頁面實(shí)現(xiàn)與各種尺寸的移動(dòng)設(shè)備屏幕之間的無縫適配，精簡(jiǎn)了程序代碼，節(jié)省了開發(fā)人力，并且提高了程序運(yùn)行效率。
[0106]以上所述僅為本發(fā)明的較佳實(shí)施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)所作的任何修改、等同替換和改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
【主權(quán)項(xiàng)】
1.一種網(wǎng)頁的顯示適配方法，其特征在于，包括以下步驟: 在HTML5網(wǎng)頁中加載屏幕適配器，所述屏幕適配器是獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件； 通過所述屏幕適配器獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息； 根據(jù)所述當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算所述HTML5網(wǎng)頁的縮放比例值； 根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML5網(wǎng)頁。2.如權(quán)利要求1所述的網(wǎng)頁的顯示適配方法，其特征在于，通過所述屏幕適配器獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息具體包括: 通過所述屏幕適配器遍歷所述HTML5網(wǎng)頁中的DOM對(duì)象； 在所述HTML網(wǎng)頁的源代碼中查找到u1-width標(biāo)簽，并獲取所述u1-width標(biāo)簽下定義的UI結(jié)構(gòu)圖的尺寸信息。3.如權(quán)利要求1所述的網(wǎng)頁的顯示適配方法，其特征在于，通過所述屏幕適配器獲取移動(dòng)設(shè)備的屏幕尺寸信息具體包括: 通過所述屏幕適配器設(shè)置所述HTML5網(wǎng)頁的meta標(biāo)簽，將當(dāng)前移動(dòng)設(shè)備的屏幕寬度賦值給所述HTML5網(wǎng)頁的視圖窗口，通過讀取所述視圖窗口的寬度值獲取所述移動(dòng)設(shè)備的屏幕尺寸信息。4.如權(quán)利要求1所述的網(wǎng)頁的顯示適配方法，其特征在于，所述根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML網(wǎng)頁具體包括: 根據(jù)所述縮放比例值重構(gòu)所述HTML5網(wǎng)頁的meta標(biāo)簽； 將重構(gòu)后的meta標(biāo)簽動(dòng)態(tài)添加到所述HTML5網(wǎng)頁的源代碼的頭標(biāo)簽內(nèi)； 通過修改后的源代碼重新加載HTML5網(wǎng)頁的DOM對(duì)象和UI結(jié)構(gòu)圖，并顯示適配后的HTML5網(wǎng)頁。5.如權(quán)利要求4所述的網(wǎng)頁的顯示適配方法，其特征在于，所述根據(jù)所述縮放比例重構(gòu)所述HTML5網(wǎng)頁的meta標(biāo)簽具體包括: 創(chuàng)建一個(gè)新的meta標(biāo)簽； 設(shè)置所述HTML5網(wǎng)頁的視圖窗口； 將所述移動(dòng)設(shè)備的屏幕尺寸信息賦值給所述視圖窗口 ； 根據(jù)所述縮放比例值設(shè)置所述視圖窗口的縮放比例。6.—種網(wǎng)頁的顯示適配系統(tǒng)，其特征在于，包括屏幕適配器和屏幕適配器加載模塊，所述屏幕適配器是與獨(dú)立的移動(dòng)設(shè)備屏幕適配程序插件包括尺寸信息獲取模塊、縮放比例計(jì)算模塊和網(wǎng)頁縮放模塊，其中: 所述屏幕適配器加載模塊，用于在HTML5網(wǎng)頁中加載所述屏幕適配器； 所述尺寸信息獲取模塊，用于獲取所述HTML5網(wǎng)頁中當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息； 所述縮放比例計(jì)算模塊，用于根據(jù)所述當(dāng)前UI結(jié)構(gòu)圖的尺寸信息和移動(dòng)設(shè)備的屏幕尺寸信息計(jì)算所述HTML5網(wǎng)頁的縮放比例值； 所述網(wǎng)頁縮放模塊，用于根據(jù)所述縮放比例值對(duì)所述HTML5網(wǎng)頁進(jìn)行等比縮放，并顯示適配后的HTML網(wǎng)頁。7.如權(quán)利要求6所述的網(wǎng)頁的顯示適配系統(tǒng)，其特征在于，所述尺寸信息獲取模塊具體用于: 遍歷所述HTML5網(wǎng)頁中的DOM對(duì)象； 在所述HTML網(wǎng)頁的源代碼中查找到u1-width標(biāo)簽，并獲取所述u1-width標(biāo)簽下定義的UI結(jié)構(gòu)圖的尺寸信息。8.如權(quán)利要求6所述的網(wǎng)頁的顯示適配系統(tǒng)，其特征在于，所述尺寸信息獲取模塊具體用于: 設(shè)置所述HTML5網(wǎng)頁的me ta標(biāo)簽，將當(dāng)前移動(dòng)設(shè)備的屏幕寬度賦值給所述HTML5網(wǎng)頁的視圖窗口，通過讀取所述視圖窗口的寬度值獲取所述移動(dòng)設(shè)備的屏幕尺寸信息。9.如權(quán)利要求6所述的網(wǎng)頁的顯示適配系統(tǒng)，其特征在于，所述網(wǎng)頁縮放模塊具體包括: meta標(biāo)簽重構(gòu)單元，用于根據(jù)所述縮放比例重構(gòu)所述HTML5網(wǎng)頁的meta標(biāo)簽； 源代碼修改單元，用于將重構(gòu)后的meta標(biāo)簽動(dòng)態(tài)添加到所述HTML5網(wǎng)頁的源代碼的頭標(biāo)簽內(nèi)； 網(wǎng)頁內(nèi)容加載單元，用于通過修改后的源代碼重新加載HTML5網(wǎng)頁的DOM對(duì)象和UI結(jié)構(gòu)圖，以顯示適配后的HTML5網(wǎng)頁。10.如權(quán)利要求9所述的網(wǎng)頁的顯示適配系統(tǒng)，其特征在于，所述meta標(biāo)簽重構(gòu)單元具體用于: 創(chuàng)建一個(gè)新的meta標(biāo)簽； 設(shè)置所述HTML5網(wǎng)頁的視圖窗口； 將所述移動(dòng)設(shè)備的屏幕尺寸信息賦值給所述視圖窗口 ； 根據(jù)所述縮放比例值設(shè)置所述視圖窗口的縮放比例。
【文檔編號(hào)】G06F17/30GK106021353SQ201610304476
【公開日】2016年10月12日
【申請(qǐng)日】2016年5月9日
【發(fā)明人】金慧
【申請(qǐng)人】Tcl集團(tuán)股份有限公司