亚洲成年人黄色一级片,日本香港三级亚洲三级,黄色成人小视频,国产青草视频,国产一区二区久久精品,91在线免费公开视频,成年轻人网站色直接看

終端內(nèi)容適配顯示方法、裝置和終端的制作方法

文檔序號:10612896閱讀:182來源:國知局
終端內(nèi)容適配顯示方法、裝置和終端的制作方法【專利摘要】本發(fā)明公開一種終端內(nèi)容適配顯示方法、裝置和終端。該方法包括:將接收的待顯示頁面數(shù)據(jù)嵌套到容器中,其中,所述容器設(shè)置有CSS自適應(yīng)擴充屬性,使得所述容器的寬度等于所述待顯示頁面的寬度;根據(jù)所述容器寬度和所述終端的屏幕寬度確定所述容器的縮放比例;通過腳本語言為所述容器動態(tài)設(shè)置縮放屬性,其中所述容器的縮放比例為所述縮放屬性的參數(shù);根據(jù)所述縮放比例對所述容器中的待顯示頁面進行等比例縮放后顯示在所述終端。本發(fā)明通過為要適配的待顯示頁面數(shù)據(jù)增加一個容器,對容器進行整體縮放,由此可以在不需要二次處理數(shù)據(jù)的情況下無損地把各種待顯示頁面數(shù)據(jù)完整地展示到移動端?!緦@f明】終端內(nèi)容適配顯示方法、裝置和終端
技術(shù)領(lǐng)域
[0001]本發(fā)明涉及終端頁面顯示領(lǐng)域,特別涉及一種終端內(nèi)容適配顯示方法、裝置和終端?!?br>背景技術(shù)
】[0002]現(xiàn)在幾乎所有的網(wǎng)站都有PC端和移動端,很多情況下移動端的部分頁面會采用PC端直接下發(fā)過來的數(shù)據(jù)。如圖1A-圖1C所示,因為終端2為移動端,待顯示頁面1的數(shù)據(jù)為PC端數(shù)據(jù),PC端數(shù)據(jù)都是基于PC端的,所以待顯示頁面1的大于終端2的屏幕,所以下發(fā)到終端2的待顯示頁面1的數(shù)據(jù)就會出現(xiàn)適配問題。[0003]現(xiàn)有技術(shù)通常采用以下幾種方式處理下發(fā)數(shù)據(jù)在移動端的適配問題。第一種,通過前臺處理,獲取移動端的設(shè)備大小,然后把頁面的所有元素強制設(shè)置成移動端的設(shè)備大小,其中前臺與后臺相對應(yīng),主要負責(zé)瀏覽器頁面或APP頁面的展示。第二種,在后臺對下發(fā)過來的PC端數(shù)據(jù)進行二次處理,針對不同移動設(shè)備生成適合移動端的數(shù)據(jù)。第三種,不使用PC端數(shù)據(jù),針對所有的PC端數(shù)據(jù)再去添加一次移動版。[0004]但是現(xiàn)有的移動端數(shù)據(jù)適配顯示方法都存在各自的缺陷。[0005]第一種前臺強制對待顯示頁面每一元素分別進行大小、位置的更改,對于移動端本來性能要求比較高,所以大量地操作頁面節(jié)點十分消耗性能,其中節(jié)點指的是web頁面中每一個圖片文字的小容器,一個頁面有大量的節(jié)點。每一個節(jié)點都有自己的寬度大小。此外,強制去更改原有數(shù)據(jù)的屬性,會導(dǎo)致頁面雖然適配了移動端,但是頁面會亂掉,打亂了原來數(shù)據(jù)的頁面結(jié)構(gòu)出現(xiàn)大量的混亂頁面。[0006]第二種后臺對下發(fā)過來的PC端數(shù)據(jù)進行二次處理的方法,比較耗費性能,也比較容易出現(xiàn)問題,且耗費時間。[0007]第三種方法對于商品銷售平臺等用戶而言,由于PC端頁面繁多,如果每一個商品頁面都去人為添加一個移動端頁面,太消耗時間;而且對有些商家而言,添加移動端頁面技術(shù)難度太高?!?br/>發(fā)明內(nèi)容】[0008]鑒于以上技術(shù)問題,本發(fā)明提供了一種終端內(nèi)容適配顯示方法、裝置和終端,可以在不需要二次處理數(shù)據(jù)的情況下無損地把各種待顯示頁面數(shù)據(jù)完整地展示到移動端。[0009]根據(jù)本發(fā)明的一個方面,提供一種終端內(nèi)容適配顯示方法,包括:[0010]將接收的待顯示頁面數(shù)據(jù)嵌套到容器中,其中,容器設(shè)置有CSS自適應(yīng)擴充屬性,使得容器寬度等于待顯示頁面的寬度;[0011]根據(jù)容器寬度和終端的屏幕寬度確定容器的縮放比例;[0012]通過腳本語言為容器動態(tài)設(shè)置縮放屬性,其中容器的縮放比例為縮放屬性的參數(shù);[0013]根據(jù)縮放比例對容器中的待顯示頁面進行等比例縮放后顯示在該終端。[0014]在本發(fā)明的一個實施例中,根據(jù)容器寬度和終端的屏幕寬度確定容器的縮放比例包括:確定容器的縮放比例為終端的屏幕寬度除以容器寬度的商。[0015]在本發(fā)明的一個實施例中,將接收的待顯示頁面數(shù)據(jù)嵌套到容器中包括:通過div標簽嵌套待顯示頁面數(shù)據(jù)。[00?6]在本發(fā)明的一個實施例中,CSS自適應(yīng)擴充屬性為display:table()屬性。[0017]在本發(fā)明的一個實施例中,終端內(nèi)容適配顯示方法還包括:[0018]通過javascript的document·documentelement·clientwidth方法獲取終端的屏幕寬度;[0019]通過javascript的offsetwidth方法獲取容器寬度。[0020]在本發(fā)明的一個實施例中,終端內(nèi)容適配顯示方法還包括:[0021]對容器添加限制標簽,其中,限制標簽的寬度就是屏幕寬度,限制標簽的高度就是容器縮放以后的高度;[0022]為限制標簽設(shè)置隱藏屬性,以隱藏容器縮放后超出限制標簽的留白部分。[0023]在本發(fā)明的一個實施例中,限制標簽的寬、高通過javascript動態(tài)設(shè)置;隱藏屬性為overflow:hidden()屬性。[0024]在本發(fā)明的一個實施例中,根據(jù)縮放比例對容器中的待顯示頁面進行等比例縮放包括:[0025]對待顯示頁面內(nèi)的所有子元素同步進行等比例縮放,其中,容器中的待顯示頁面進行等比例縮放的縮放中心點為容器左上端點。[0026]在本發(fā)明的一個實施例中,容器有多個,多個待顯示頁面通過多個容器在終端顯不。[0027]根據(jù)本發(fā)明的另一方面,提供一種終端內(nèi)容適配顯示裝置,包括數(shù)據(jù)嵌套模塊、縮放比確定模塊、縮放屬性設(shè)置模塊、縮放模塊和顯示模塊,其中:[0028]數(shù)據(jù)嵌套模塊,用于將接收的待顯示頁面數(shù)據(jù)嵌套到容器中,其中,容器設(shè)置有CSS自適應(yīng)擴充屬性,使得容器的寬度等于待顯示頁面的寬度;[0029]縮放比確定模塊,用于根據(jù)容器寬度和終端的屏幕寬度確定容器的縮放比例;[0030]縮放屬性設(shè)置模塊,用于通過腳本語言為容器動態(tài)設(shè)置縮放屬性,其中容器的縮放比例為縮放屬性的參數(shù);[0031]縮放模塊,用于根據(jù)縮放比例對容器中的待顯示頁面進行等比例縮放;[0032]顯示模塊,用于將等比例縮放后的待顯示頁面顯示在終端。[0033]在本發(fā)明的一個實施例中,縮放比確定模塊用于確定終端的屏幕寬度除以容器寬度的商為容器的縮放比例。[0034]在本發(fā)明的一個實施例中,數(shù)據(jù)嵌套模塊用于通過div標簽嵌套待顯示頁面數(shù)據(jù)。[0035]在本發(fā)明的一個實施例中,CSS自適應(yīng)擴充屬性為display:table()屬性。[0036]在本發(fā)明的一個實施例中,終端內(nèi)容適配顯示裝置還包括屏幕寬度獲取模塊和容器寬度獲取模塊,其中:[0037]屏幕寬度獲取模塊,用于通過javascript的document·documentelement·clientwidth方法獲取終端的屏幕寬度;[0038]容器寬度獲取模塊,用于通過javascript的offsetwidth方法獲取容器寬度。[0039]在本發(fā)明的一個實施例中,終端內(nèi)容適配顯示裝置還包括限制標簽添加模塊和隱藏屬性設(shè)置模塊,其中:[0040]限制標簽添加模塊,用于對容器添加限制標簽,其中,限制標簽的寬度就是屏幕寬度,限制標簽的高度就是容器縮放以后的高度;[0041]隱藏屬性設(shè)置模塊,用于為限制標簽設(shè)置隱藏屬性,以隱藏容器縮放后超出限制標簽的留白部分。[0042]在本發(fā)明的一個實施例中,限制標簽的寬、高通過javascript動態(tài)設(shè)置;隱藏屬性為overflow:hidden()屬性。[0043]在本發(fā)明的一個實施例中,縮放模塊用于對待顯示頁面內(nèi)的所有子元素同步進行等比例縮放,其中,容器中的待顯示頁面進行等比例縮放的縮放中心點為容器左上端點。[0044]在本發(fā)明的一個實施例中,容器有多個,多個待顯示頁面通過多個容器在終端顯不。[0045]根據(jù)本發(fā)明的另一方面,提供一種終端內(nèi)容適配顯示裝置,包括存儲器和處理器,其中:[0046]存儲器,用于存儲指令;[0047]處理器,用于執(zhí)行存儲器存儲的指令,使得該裝置執(zhí)行實現(xiàn)上述任一實施例的方法的操作。[0048]根據(jù)本發(fā)明的另一方面,提供一種終端,包括如上述任一實施例的終端內(nèi)容適配顯示裝置。[0049]本發(fā)明通過為要適配的待顯示頁面數(shù)據(jù)增加一個容器,對容器進行整體縮放,由此可以在不需要二次處理數(shù)據(jù)的情況下無損地把各種待顯示頁面數(shù)據(jù)完整地展示到移動端。【附圖說明】[0050]為了更清楚地說明本發(fā)明實施例或現(xiàn)有技術(shù)中的技術(shù)方案,下面將對實施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹,顯而易見地,下面描述中的附圖僅僅是本發(fā)明的一些實施例,對于本領(lǐng)域普通技術(shù)人員來講,在不付出創(chuàng)造性勞動性的前提下,還可以根據(jù)這些附圖獲得其他的附圖。[0051]圖1A-圖1C為現(xiàn)有技術(shù)中終端無法適配顯示待顯示頁面的示意圖。[0052]圖2為本發(fā)明終端內(nèi)容適配顯示方法一個實施例的示意圖。[0053]圖3為本發(fā)明一個實施例中對待顯示頁面進行適配顯示的示意圖。[0054]圖4為本發(fā)明另一實施例中對待顯示頁面進行適配顯示的示意圖。[0055]圖5為本發(fā)明終端內(nèi)容適配顯示方法另一實施例的示意圖。[0056]圖6為本發(fā)明一個實施例中容器等比例縮放后留白的示意圖。[0057]圖7為本發(fā)明一個實施例中終端頁面同時適配顯示兩個容器內(nèi)待顯示頁面的示意圖。[0058]圖8為本發(fā)明終端內(nèi)容適配顯示裝置一個實施例的示意圖。[0059]圖9為本發(fā)明終端內(nèi)容適配顯示裝置另一實施例的示意圖。[0060]圖10為本發(fā)明終端內(nèi)容適配顯示裝置又一實施例的示意圖?!揪唧w實施方式】[0061]下面將結(jié)合本發(fā)明實施例中的附圖,對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述,顯然,所描述的實施例僅僅是本發(fā)明一部分實施例,而不是全部的實施例。以下對至少一個示例性實施例的描述實際上僅僅是說明性的,決不作為對本發(fā)明及其應(yīng)用或使用的任何限制?;诒景l(fā)明中的實施例,本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實施例,都屬于本發(fā)明保護的范圍。[0062]除非另外具體說明,否則在這些實施例中闡述的部件和步驟的相對布置、數(shù)字表達式和數(shù)值不限制本發(fā)明的范圍。同時,應(yīng)當明白,為了便于描述,附圖中所示出的各個部分的尺寸并不是按照實際的比例關(guān)系繪制的。[0063]對于相關(guān)領(lǐng)域普通技術(shù)人員已知的技術(shù)、方法和設(shè)備可能不作詳細討論,但在適當情況下,所述技術(shù)、方法和設(shè)備應(yīng)當被視為授權(quán)說明書的一部分。在這里示出和討論的所有示例中,任何具體值應(yīng)被解釋為僅僅是示例性的,而不是作為限制。因此,示例性實施例的其它示例可以具有不同的值。[0064]應(yīng)注意到:相似的標號和字母在下面的附圖中表示類似項,因此,一旦某一項在一個附圖中被定義,則在隨后的附圖中不需要對其進行進一步討論。[0065]圖2為本發(fā)明終端內(nèi)容適配顯示方法一個實施例的示意圖。優(yōu)選的,本實施例可由本發(fā)明終端內(nèi)容適配顯示裝置執(zhí)行。該終端可以是手機、平板電腦等移動終端,也可以是PC等終端。該方法包括以下步驟:[0066]步驟21,接收服務(wù)器下發(fā)的待顯示頁面數(shù)據(jù),將接收的待顯示頁面數(shù)據(jù)嵌套到容器中,其中,待顯示頁面數(shù)據(jù)可以是移動端數(shù)據(jù)(即適合移動端顯示的數(shù)據(jù))或者PC端數(shù)據(jù)(即適合PC端顯不的數(shù)據(jù))。容器設(shè)置有CSS(CascadingStyleSheets,層疊樣式表,也簡稱為CSS3)自適應(yīng)擴充屬性,使得容器寬度等于待顯示頁面的寬度。[0067]CSS是一種用來為結(jié)構(gòu)化文檔(如HTML(HyperTextMarkupLanguage,超級文本標記語言)文檔或XML(ExtensibleMarkupLanguage,可擴展標記語言)應(yīng)用)添加樣式(例如字體、間距和顏色等)的計算機語言,由W3C(WorldWideWebConsortium,萬維網(wǎng)聯(lián)盟)定義和維護。目前CSS最新版本是CSS2.1,為W3C的推薦標準。[0068]在本發(fā)明的一個具體實施例中,步驟21可以包括:[0069]步驟211,通過div標簽嵌套待顯示頁面數(shù)據(jù),構(gòu)成一個最基本的容器,其中div標簽是HTML語言中最的一個基本的單位,div是層疊樣式表中的定位技術(shù),全稱Division,即為劃分,div標簽定義HTML文檔中的分隔(Division)或部分(section),div標簽通常是成對出現(xiàn)的,比如〈div>和</div>。[0070]容器嵌套待顯示頁面數(shù)據(jù)的具體形式如下:[0071]<div>待顯示頁面數(shù)據(jù)</div>[0072]步驟212,為該div標簽添加CSS自適應(yīng)擴充屬性,例如CSS自適應(yīng)擴充屬性具體可以為display:table屬性,使得容器具有能被內(nèi)部元素撐開的能力,待顯示頁面數(shù)據(jù)的最大寬度是多少,容器的最大寬度就是多少,其中為div標簽添加display:table屬性后,標簽會作為塊級表格來顯示(類似〈table〉)。[0073]在本發(fā)明的一個具體實施例中,為該div標簽添加CSS自適應(yīng)擴充display:table屬性的具體形式如下:[0074][0075]此時,容器的寬度是待顯示頁面數(shù)據(jù)的最大寬度。[0076]例如,當容器用來存放如圖1所示的待顯示頁面1的數(shù)據(jù)時,容器會被撐大成為一個PC端容器,此時容器的寬度是待顯示頁面1的寬度,容器的高度是待顯示頁面1的高度。這樣PC端的頁面就可以完整無損的存在這個容器里面,PC下發(fā)什么樣的待顯示頁面數(shù)據(jù),容器就存儲什么樣的待顯示頁面數(shù)據(jù),不會去強制更改待顯示頁面數(shù)據(jù)里的任何屬性和節(jié)點屬性,這樣就保證了待顯示頁面的完整性和百分百的還原度。[0077]步驟22,根據(jù)容器寬度和終端的屏幕寬度確定容器的縮放比例。[0078]在本發(fā)明的一個具體實施例中,步驟22可以包括:[0079]1、通過javascript的document·documentelement·clientwidth方法獲取終端的屏幕寬度。其中javascript為直譯式腳本語言,是一種動態(tài)類型、弱類型、基于原型的語言,內(nèi)置支持類型;javascript的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(HyperTextMarkupLanguage,超級文本標記語言)網(wǎng)頁上使用,用來給HTML網(wǎng)頁增加動態(tài)功能。[0080]2、通過javascript的offsetwidth方法獲取容器寬度(因為容器有display:table屬性,所以容器寬度可以被撐開超出屏幕手機寬度)。[0081]3、根據(jù)公式(1)確定容器的縮放比例[0082]縮放比例=終端的屏幕寬度/容器寬度(1)[0083]其中,終端的屏幕寬度指的是終端的頁面可見寬度,例如:手機終端橫屏瀏覽時頁面可見寬度指的是屏幕的長,手機終端豎屏瀏覽時頁面可見寬度指的是屏幕的寬。[0084]在本發(fā)明的另一具體實施例中,本發(fā)明還可以根據(jù)公式(2)確定容器的縮放比例。[0085]縮放比例=目標顯示寬度/容器寬度(2)[0086]其中,目標顯示寬度小于等于終端的屏幕寬度,目標顯示寬度可以由用戶根據(jù)需求進行設(shè)定。[0087]步驟23,通過腳本語言javascript為容器動態(tài)設(shè)置縮放屬性transform:scale(縮放比例,縮放比例),其中,容器的縮放比例為縮放屬性的參數(shù)。transform:scale屬性是為CCS的新增屬性,此屬性可以把標簽放大或者縮小??s放屬性transform:scale(X,Y)對標簽內(nèi)的所有元素同時進行縮放,其中X表示水平方向縮放的倍數(shù),Υ表示垂直方向的縮放倍數(shù),Υ是一個可選參數(shù)。若Υ沒有設(shè)置的話,則表示Χ,Υ兩個方向的縮放倍數(shù)是一樣的,并以X為準。若設(shè)置Χ=Υ=縮放比例,則按照縮放屬性transform:scale(縮放比例,縮放比例)進行縮放,即為根據(jù)縮放比例對容器中的待顯示頁面進行等比例縮放。[0088]步驟24,根據(jù)縮放比例對容器以及容器中的待顯示頁面1進行等比例縮放;之后如圖3或圖4所示,將容器嵌入終端頁面中,使得等比例縮放后的待顯示頁面1顯示在該終端2中。[0089]根據(jù)縮放比例對容器中的待顯示頁面進行等比例縮放的過程具體可以包括:按照縮放屬性transform:scale(縮放比例,縮放比例),對待顯示頁面1內(nèi)的字體、圖片、文字、鏈接等所有子元素同步進行等比例縮放,其中,對容器中的待顯示頁面1進行等比例縮放的縮放中心點為容器左上端點。[0090]在本發(fā)明的一個具體示例中,等比例縮放的過程如下:[0091]〈divstyle="1:瓜118;1^〇1'111:8〇&16(0.5,0.5)">待顯不頁面數(shù)據(jù)〈/(1;^>[0092]上述具體示例中容器和容器內(nèi)的待顯示頁面數(shù)據(jù),按照縮放屬性transform:scale等比例縮小百分之五十。[0093]對于采用公式(1)獲取縮放比例的情況而言,在按照圖2實施例的步驟24對如圖1所示的待顯示頁面1進行等比例縮放后,容器寬度等于終端的屏幕寬度,待顯示頁面1在終端2的顯示,如圖3所示。[0094]對于采用公式(2)獲取縮放比例的情況而言,在按照圖2實施例的步驟24對如圖1所示的待顯示頁面1進行等比例縮放后,容器寬度等于目標顯示寬度,目標顯示寬度小于終端的屏幕寬度,待顯示頁面1在終端2的顯示,如圖4所示。由此,使得待顯示頁面1可以根據(jù)用戶需求而設(shè)定的大小在終端頁面中進行顯示。例如將容器中的待顯示頁面1進行居中顯示,寬度方向兩邊留一定距離,例如可以留給邊線、滾動條等使用。[0095]基于本發(fā)明上述實施例提供的終端內(nèi)容適配顯示方法,改變了以往在數(shù)據(jù)上去適配的思想,不用后臺二次處理數(shù)據(jù)。而是為要適配的待顯示頁面數(shù)據(jù)增加一個容器,對容器進行整體縮放,而不是單個元素處理,這種整體縮放不會破壞原有頁面數(shù)據(jù)結(jié)構(gòu)。[0096]本發(fā)明上述實施例無需大量節(jié)點操作,性能高,速度快;無需后臺去做二次數(shù)據(jù)處理,減少了程序工作量;無論PC端數(shù)據(jù)還是移動端數(shù)據(jù)都能完美適配顯示;不會破壞原有頁面結(jié)構(gòu),可以將待顯示頁面原模原樣地展示到移動端;適用范圍廣,可以適用于所有類型的瀏覽器和所有內(nèi)嵌APP的頁面;本發(fā)明上述實施例兼容性很好,可以支持安卓和I0S等系統(tǒng),可以支持除極少數(shù)低版本設(shè)備外的大部分終端設(shè)備。[0097]本發(fā)明上述實施例特別適用于商品詳細頁面在移動端的顯示。經(jīng)過大量的測試和用戶反饋,已經(jīng)十分高效地解決了現(xiàn)有技術(shù)中一直困擾用戶的移動端適配問題,很好地解決了移動端商品詳細頁面混亂不適配的問題。[0098]圖5為本發(fā)明終端內(nèi)容適配顯示方法另一實施例的示意圖。優(yōu)選的,本實施例可由本發(fā)明終端內(nèi)容適配顯示裝置執(zhí)行。該方法包括以下步驟:[0099]步驟51,接收服務(wù)器下發(fā)的待顯示頁面數(shù)據(jù),將接收的待顯示頁面數(shù)據(jù)嵌套到容器中。圖5實施例中的步驟51與圖2實施例中的步驟21相同或類似,這里不再詳述。[0100]步驟52,根據(jù)容器寬度和終端的屏幕寬度確定容器的縮放比例。圖5實施例中的步驟52與圖2實施例中的步驟22相同或類似,這里不再詳述。[0101]步驟53,判斷容器的縮放比例是否等于1。若容器的縮放比例等于1,則執(zhí)行步驟54;否則,若容器的縮放比例不等于1,則執(zhí)行步驟58。[0102]步驟54,通過腳本語言javascript為容器動態(tài)設(shè)置縮放屬性transform:scale(縮放比例,縮放比例)。圖5實施例中的步驟54與圖2實施例中的步驟23相同或類似,這里不再詳述。[0103]步驟55,按照縮放屬性transform:scale(縮放比例,縮放比例)對容器進行縮放,即,根據(jù)縮放比例對容器中的待顯示頁面進行等比例縮放根據(jù)縮放比例對容器中的待顯示頁面進行等比例縮放。[0104]在步驟55的縮放過程中,因為transform:scale屬性有如下特征:雖然標簽被放大或者縮小了,但是標簽還是占有的未被縮放時候的位置大小(如圖6所示)。這樣待顯示頁面1就會出現(xiàn)縮放過后的留白3,此時需要把通過步驟56和步驟57將留白位置給隱藏掉。[0105]步驟56,對容器添加限制標簽,其中,對于采用公式(1)計算的縮放比進行縮放后的容器而言,限制標簽的寬度就是屏幕寬度,限制標簽的高度就是容器縮放以后的高度;對于采用公式(2)計算的縮放比進行縮放后的容器而言,限制標簽的寬度就是目標顯示寬度,限制標簽的高度就是容器縮放以后的高度。[0106]例如:在下述具體實施例中,標簽〃scale-cont〃為子標簽,即用于嵌套待顯示頁面數(shù)據(jù)的容器;標簽"scale-parent"為父標簽,即限制容器高、寬的限制標簽。[0107]<divid="scale-parent">[0108]〈divid="scale-cont"〉待顯不頁面數(shù)據(jù)</div>[0109]</div>[0110]在本發(fā)明的一個實施例中,限制標簽的寬、高可以通過javascript動態(tài)設(shè)置。[0111]在本發(fā)明的一個實施例中,若容器縮放以后的高度小于終端屏幕高度,則只用頁面的一部分即可顯示該容器,如圖3和圖4所示,只需將容器嵌入終端頁面,就能實現(xiàn)待顯示頁面1的顯示。[0112]在本發(fā)明的另一實施例中,若容器縮放以后的高度大于終端屏幕高度,則可以自動添加滾動條,來滾動顯示整個容器的高度內(nèi)容,以實現(xiàn)待顯示頁面1的顯示。[0113]步驟57,給限制標簽設(shè)置CSS隱藏屬性,以隱藏容器縮放后超出限制標簽的留白部分3〇[0114]在本發(fā)明的一個實施例中,CSS隱藏屬性為overflow:hidden()屬性,overflow:hidden的作用在于若子標簽或者內(nèi)容超出了父標簽的高寬會被隱藏掉,隱藏留白3后的最終結(jié)果如圖3所示,從而解決了留白問題。[0115]步驟58,將容器嵌入終端頁面中,使得等比例縮放后的待顯示頁面顯示在該終端中。[0116]上述實施例中,容器可以有多個,多個待顯示頁面通過多個容器嵌入終端頁面中,使得等比例縮放后的待顯示頁面顯示在該終端中。如圖7所示,是一個終端2中通過兩個容器同時顯示兩個待顯示頁面1-1、1-2的示意圖。[0117]本發(fā)明上述實施例中,等比例縮放針對可以不同待顯示頁面的寬度,進行不同比例的縮放或決定是否進行縮放。例如:對于采用公式(1)確定的縮放比例進行等比例縮放的情況,若終端的屏幕寬度為750,則對于寬度750的待顯示頁面不縮放,對于寬度850的待顯示頁面則將其縮小到750,對于寬度250的待顯示頁面則將其放大到750。[0118]本發(fā)明上述實施例中可以實現(xiàn)把想縮放的待顯示頁面縮放、不縮放的待顯示頁面原樣顯示。本發(fā)明上述實施例可以適用于一個移動端頁面本來不需要縮放時,內(nèi)部嵌入了一個需要縮放的內(nèi)容的場景。[0119]本發(fā)明上述實施例首次為要適配的待顯示頁面數(shù)據(jù)增加一個容器,之后對容器進行整體縮放,而不是單個處理;這種整體縮放不會破壞原有頁面數(shù)據(jù)結(jié)構(gòu),無需后臺二次處理數(shù)據(jù);無需強制更改頁面所有的元素;無需判斷待顯示頁面數(shù)據(jù)是移動端數(shù)據(jù)還是PC端數(shù)據(jù),由此可以完整無損地、原樣地展示各種待顯示頁面數(shù)據(jù)而不會破壞待顯示頁面數(shù)據(jù)結(jié)構(gòu)。[0120]本發(fā)明上述實施例可以將大于移動端的頁面無需二次處理數(shù)據(jù)完整無損地嵌入到移動端,無論待顯示頁面多大、多小,都能完整展示在移動web端和APP內(nèi)嵌端。[0121]圖8為本發(fā)明終端內(nèi)容適配顯示裝置一個實施例的示意圖。如圖8所示的終端內(nèi)容適配顯示裝置包括數(shù)據(jù)嵌套模塊81、縮放比確定模塊82、縮放屬性設(shè)置模塊83、縮放模塊84和顯示模塊85,其中:[0122]數(shù)據(jù)嵌套模塊81,用于通過div標簽將接收的待顯示頁面數(shù)據(jù)嵌套到容器中,其中,容器設(shè)置有CSS自適應(yīng)擴充屬性,使得容器的寬度等于待顯示頁面的寬度。例如,CSS自適應(yīng)擴充屬性可以采用display:table()屬性。[0123]縮放比確定模塊82,用于根據(jù)容器寬度和終端的屏幕寬度確定容器的縮放比例。其中,縮放比確定模塊82具體可以利用根據(jù)公式(1)或公式(2)確定容器的縮放比例。[0124]縮放屬性設(shè)置模塊83,用于通過腳本語言為容器動態(tài)設(shè)置縮放屬性,其中容器的縮放比例為縮放屬性的參數(shù);縮放屬性具體可以是transform:scale屬性。[0125]縮放模塊84,用于根據(jù)縮放比例對容器中的待顯示頁面進行等比例縮放,其中,縮放模塊84可以用于對待顯示頁面內(nèi)的所有子元素同步進行等比例縮放;容器中的待顯示頁面進行等比例縮放的縮放中心點為容器左上端點。[0126]顯示模塊85,用于將縮放模塊84進行等比例縮放后的待顯示頁面顯示在終端。其中,如圖7所示,顯示模塊85還可以用于同時將多個待顯示頁面通過多個容器在終端進行顯不。[0127]基于本發(fā)明上述實施例提供的終端內(nèi)容適配顯示裝置,改變了以往在數(shù)據(jù)上去適配的思想,不用后臺二次處理數(shù)據(jù)。而是為要適配的待顯示頁面數(shù)據(jù)增加一個容器,對容器進行整體縮放,而不是單個元素處理,這種整體縮放不會破壞原有頁面數(shù)據(jù)結(jié)構(gòu)。[0128]本發(fā)明上述實施例無需大量節(jié)點操作,性能高,速度快;無需后臺去做二次數(shù)據(jù)處理,減少了程序工作量;無論PC端數(shù)據(jù)還是移動端數(shù)據(jù)都能完美適配顯示;不會破壞原有頁面結(jié)構(gòu),可以將待顯示頁面原模原樣地展示到移動端;適用范圍廣,可以適用于所有類型的瀏覽器和所有內(nèi)嵌APP的頁面;本發(fā)明兼容性很好,可以支持安卓和I0S等系統(tǒng),可以支持除極少數(shù)低版本設(shè)備外的大部分終端設(shè)備。[0129]圖9為本發(fā)明終端內(nèi)容適配顯示裝置另一實施例的示意圖。與圖8所示實施例相比,在圖9所示實施例的終端內(nèi)容適配顯示裝置還可以包括屏幕寬度獲取模塊86和容器寬度獲取模塊87,其中:[0130]屏幕寬度獲取模塊86,用于通過javascript的document·documentelement·clientwidth方法獲取終端的屏幕寬度。[0131]容器寬度獲取模塊87,用于通過javascript的offsetwidth方法獲取通過數(shù)據(jù)嵌套模塊81嵌套待顯示頁面數(shù)據(jù)后的容器寬度。[0132]本發(fā)明上述實施例可以通過屏幕寬度獲取模塊獲取終端屏幕寬度,通過容器寬度獲取模塊獲取容器寬度,由此可以方便縮放比確定模塊根據(jù)容器寬度和終端的屏幕寬度確定容器的縮放比例。[0133]在本發(fā)明的一個實施例中,如圖9所示,終端內(nèi)容適配顯示裝置還可以包括限制標簽添加模塊88和隱藏屬性設(shè)置模塊89,其中:[0134]限制標簽添加模塊88,用于對容器添加限制標簽,其中,限制標簽的寬、高通過javascript動態(tài)設(shè)置。例如,對于采用公式(1)計算的縮放比進行縮放后的容器而言,限制標簽的寬度就是屏幕寬度,限制標簽的高度就是容器縮放以后的高度。[0135]隱藏屬性設(shè)置模塊89,用于為限制標簽設(shè)置隱藏屬性,以隱藏容器縮放后超出限制標簽的留白部分,其中隱藏屬性為overflow:hidden()屬性。[0136]本發(fā)明上述實施例解決了圖8實施例中利用transform:scale屬性對容器進行縮放過后造成的如圖6所示的留白問題。[0137]圖10為本發(fā)明終端內(nèi)容適配顯示裝置又一實施例的示意圖。如圖10所示,所述終端內(nèi)容適配顯示裝置10包括存儲器101、處理器102、視頻適配器103、通信接口105、輸入/輸出設(shè)備106和便攜式存儲器107,其中:[0138]存儲器101、處理器102、視頻適配器103、通信接口105、輸入/輸出設(shè)備106和便攜式存儲器107通過總線108連接。總線108表示若干類型的總線結(jié)構(gòu)中的任何一種總線結(jié)構(gòu)的一個或多個,包括存儲器總線或存儲器控制器、外圍總線、加速圖形端口,以及處理器或使用各種總線體系結(jié)構(gòu)中的任何一種的局部總線。[0139]如圖10所示的終端內(nèi)容適配顯示裝置10包括存儲設(shè)備。存儲設(shè)備可包括存儲器101和/或便攜式存儲器12。存儲器101可包括RAM、R0M、閃存、硬盤、或其他眾所周知的存儲裝置??梢苿哟鎯ζ?2可包括閃存或在GSM通信系統(tǒng)中公知的用戶身份模塊(sn〇卡,或者其他諸如"智能卡"之類的公知存儲裝置。存儲設(shè)備可用于存儲數(shù)據(jù)和/或用于運行操作系統(tǒng)1011和應(yīng)用程序1012的代碼。示例數(shù)據(jù)可包括經(jīng)由一個或多個有線或無線網(wǎng)絡(luò)發(fā)送給和/或接收來自一個或多個網(wǎng)絡(luò)服務(wù)器或其他設(shè)備的待顯示網(wǎng)頁數(shù)據(jù)、文本、圖像、聲音文件、視頻數(shù)據(jù)、或其他數(shù)據(jù)集。存儲器101可用于存儲諸如國際移動訂戶身份(IMSI)等訂戶標識符,以及諸如國際移動設(shè)備標識符(MEI)等設(shè)備標識符??蓪⒋祟悩俗R符傳送給網(wǎng)絡(luò)服務(wù)器以標識用戶和設(shè)備。[0140]多個程序模塊可被儲存在存儲器101和/或便攜式存儲器12中。這些程序包括操作系統(tǒng)1011、一個或多個應(yīng)用程序1012、其他程序模塊1013以及程序數(shù)據(jù)1014。這種應(yīng)用程序或程序模塊的示例可包括例如由于實現(xiàn)終端內(nèi)容適配顯示裝置的一個或多個組件、或圖2、圖5的流程圖中的一個或多個步驟和/或本文中所描述的其它實施例的計算機程序邏輯(例如計算機程序代碼或指令)。[0141]如圖10所示的終端內(nèi)容適配顯示裝置10還包括處理器102,用于執(zhí)行存儲設(shè)備存儲的指令或程序,使得該裝置執(zhí)行實現(xiàn)上述任一實施例的方法(例如圖2或圖5實施例所示方法)的操作。[0142]如圖10所示的終端內(nèi)容適配顯示裝置10還可以包括輸入/輸出設(shè)備106。輸入/輸出設(shè)備106可以包括諸如觸摸屏、話筒、相機、物理鍵盤、和/或跟蹤球的一個或多個輸入設(shè)備,以及諸如揚聲器的一個或多個輸出設(shè)備。[0143]其它可能的輸出設(shè)備可包括壓電或其他觸覺輸出設(shè)備。一些設(shè)備可服務(wù)一個以上的輸入/輸出功能。例如,觸摸屏和顯示屏104可被組合在單個輸入/輸出設(shè)備中。[0144]如圖10所示的終端內(nèi)容適配顯示裝置10還可以包括顯示屏104。顯示屏104可以通過諸如視頻適配器103之類的接口連接到總線108。顯示屏104可在終端內(nèi)容適配顯示裝置10外部或納入其中。顯示屏104可顯示信息(例如最終顯示經(jīng)過容器整體縮放后的待顯示頁面),以及作為用于接收用戶命令和/或其它信息(例如,通過觸摸、手指姿勢、虛擬鍵盤等等)的用戶界面。[0145]如圖10所示的終端內(nèi)容適配顯示裝置10還可以通信接口105,通信接口105可以通過無線或有線連接方式與服務(wù)器11進行通信,例如可以獲取服務(wù)器11下發(fā)的待顯示頁面數(shù)據(jù)。通信接口105支持處理器與外部設(shè)備(例如服務(wù)器11)間的雙向通信。通信接口105可以包括用于與移動通信網(wǎng)絡(luò)進行通信的蜂窩調(diào)制解調(diào)器、和/或其它基于無線電的調(diào)制解調(diào)器(例如,藍牙和/或Wi-Fi)。[0146]根據(jù)本發(fā)明的另一方面,提供一種終端,包括如上述任一實施例(例如圖8-圖10中任一實施例)所述的終端內(nèi)容適配顯示裝置。本發(fā)明上述實施例的終端可以是手機、平板電腦等移動終端,也可以是PC等終端。[0147]本發(fā)明上述實施例的終端還可包括電源、諸如全球定位系統(tǒng)(GPS)接收機之類的衛(wèi)星導(dǎo)航系統(tǒng)接收機、加速計、和/或物理連接器,該物理連接器可以是USB端口、IEEE1394端口、和/或RS-232端口。所示的組件并非是必需或者涵蓋全部的,因為如本領(lǐng)域技術(shù)人員所理解地,任何組件可不存在且附加地其它組件可存在。[0148]基于本發(fā)明上述實施例提供的終端,通過終端內(nèi)容適配顯示裝置,改變了以往在數(shù)據(jù)上去適配的思想,不用后臺二次處理數(shù)據(jù)。而是為要適配的待顯示頁面數(shù)據(jù)增加一個容器,對容器進行整體縮放,而不是單個元素處理,這種整體縮放不會破壞原有頁面數(shù)據(jù)結(jié)構(gòu)。[0149]本發(fā)明上述實施例無需大量節(jié)點操作,性能高,速度快;無需后臺去做二次數(shù)據(jù)處理,減少了程序工作量;無論PC端數(shù)據(jù)還是移動端數(shù)據(jù)都能完美適配顯示;不會破壞原有頁面結(jié)構(gòu),可以將待顯示頁面原模原樣地展示到移動端;適用范圍廣,可以適用于所有類型的瀏覽器和所有內(nèi)嵌APP的頁面;本發(fā)明兼容性很好,可以支持安卓和I0S等系統(tǒng),可以支持除極少數(shù)低版本設(shè)備外的大部分終端設(shè)備。[0150]在上面所描述的數(shù)據(jù)嵌套模塊81、縮放比確定模塊82、縮放屬性設(shè)置模塊83、縮放模塊84、屏幕寬度獲取模塊86、容器寬度獲取模塊87、限制標簽添加模塊88、隱藏屬性設(shè)置模塊89等功能單元可以實現(xiàn)為用于執(zhí)行本申請所描述功能的通用處理器、可編程邏輯控制器(PLC)、數(shù)字信號處理器(DSP)、專用集成電路(ASIC)、現(xiàn)場可編程門陣列(FPGA)或者其他可編程邏輯器件、分立門或者晶體管邏輯器件、分立硬件組件或者其任意適當組合。[0151]至此,已經(jīng)詳細描述了本發(fā)明。為了避免遮蔽本發(fā)明的構(gòu)思,沒有描述本領(lǐng)域所公知的一些細節(jié)。本領(lǐng)域技術(shù)人員根據(jù)上面的描述,完全可以明白如何實施這里公開的技術(shù)方案。[0152]本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白,本發(fā)明的實施例可提供為方法、系統(tǒng)、或計算機程序產(chǎn)品。因此,本發(fā)明可采用完全硬件實施例、完全軟件實施例、或結(jié)合軟件和硬件方面的實施例的形式。而且,本發(fā)明可采用在一個或多個其中包含有計算機可用程序代碼的計算機可用非瞬時性存儲介質(zhì)(包括但不限于磁盤存儲器、CD-ROM、光學(xué)存儲器等)上實施的計算機程序產(chǎn)品的形式。[0153]本發(fā)明是參照根據(jù)本發(fā)明實施例的方法、設(shè)備(系統(tǒng))、和計算機程序產(chǎn)品的流程圖和/或方框圖來描述的。應(yīng)理解可由計算機程序指令實現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結(jié)合。可提供這些計算機程序指令到通用計算機、專用計算機、嵌入式處理機或其他可編程數(shù)據(jù)處理設(shè)備的處理器以產(chǎn)生一個機器,使得通過計算機或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的裝置。[0154]這些計算機程序指令也可存儲在能引導(dǎo)計算機或其他可編程數(shù)據(jù)處理設(shè)備以特定方式工作的計算機可讀存儲器中,使得存儲在該計算機可讀存儲器中的指令產(chǎn)生包括指令裝置的制造品,該指令裝置實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能。[0155]這些計算機程序指令也可裝載到計算機或其他可編程數(shù)據(jù)處理設(shè)備上,使得在計算機或其他可編程設(shè)備上執(zhí)行一系列操作步驟以產(chǎn)生計算機實現(xiàn)的處理,從而在計算機或其他可編程設(shè)備上執(zhí)行的指令提供用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的步驟。[0156]本發(fā)明的描述是為了示例和描述起見而給出的,而并不是無遺漏的或者將本發(fā)明限于所公開的形式。很多修改和變化對于本領(lǐng)域的普通技術(shù)人員而言是顯然的。選擇和描述實施例是為了更好說明本發(fā)明的原理和實際應(yīng)用,并且使本領(lǐng)域的普通技術(shù)人員能夠理解本發(fā)明從而設(shè)計適于特定用途的帶有各種修改的各種實施例?!局鳈?quán)項】1.一種終端內(nèi)容適配顯示方法,其特征在于,包括:將接收的待顯示頁面數(shù)據(jù)嵌套到容器中,其中,所述容器設(shè)置有CSS自適應(yīng)擴充屬性,使得所述容器的寬度等于所述待顯示頁面的寬度;根據(jù)所述容器寬度和所述終端的屏幕寬度確定所述容器的縮放比例;通過腳本語言為所述容器動態(tài)設(shè)置縮放屬性,其中所述容器的縮放比例為所述縮放屬性的參數(shù);根據(jù)所述縮放比例對所述容器中的待顯示頁面進行等比例縮放后顯示在所述終端。2.根據(jù)權(quán)利要求1所述的方法,其特征在于,所述根據(jù)所述容器寬度和所述終端的屏幕寬度確定所述容器的縮放比例包括:確定所述容器的縮放比例為所述終端的屏幕寬度除以所述容器寬度的商。3.根據(jù)權(quán)利要求2所述的方法,其特征在于,所述將接收的待顯示頁面數(shù)據(jù)嵌套到容器中包括:通過div標簽嵌套所述待顯示頁面數(shù)據(jù);和/或,所述CSS自適應(yīng)擴充屬性為display:table()屬性;和/或,所述方法還包括:通過javascript的offsetwidth方法獲取所述容器寬度;通過javascript的document·documentelement·clientwidth方法獲取所述終端的屏幕寬度。4.根據(jù)權(quán)利要求1-3中任一項所述的方法,其特征在于,還包括:對所述容器添加限制標簽,其中,限制標簽的寬度就是屏幕寬度,限制標簽的高度就是容器縮放以后的高度;為所述限制標簽設(shè)置隱藏屬性,以隱藏所述容器縮放后超出所述限制標簽的留白部分。5.根據(jù)權(quán)利要求4所述的方法,其特征在于,所述限制標簽的寬、高通過javascript動態(tài)設(shè)置;所述隱藏屬性為overflow:hidden()屬性。6.根據(jù)權(quán)利要求1-3中任一項所述的方法,其特征在于,所述根據(jù)所述縮放比例對所述容器中的待顯示頁面進行等比例縮放包括:對所述待顯示頁面內(nèi)的所有子元素同步進行等比例縮放,其中,所述容器中的待顯示頁面進行等比例縮放的縮放中心點為容器左上端點。7.根據(jù)權(quán)利要求1-3中任一項所述的方法,其特征在于,所述容器有多個,多個待顯示頁面通過多個容器在所述終端顯示。8.-種終端內(nèi)容適配顯示裝置,其特征在于,包括數(shù)據(jù)嵌套模塊、縮放比確定模塊、縮放屬性設(shè)置模塊、縮放模塊和顯示模塊,其中:數(shù)據(jù)嵌套模塊,用于將接收的待顯示頁面數(shù)據(jù)嵌套到容器中,其中,所述容器設(shè)置有CSS自適應(yīng)擴充屬性,使得所述容器的寬度等于所述待顯示頁面的寬度;縮放比確定模塊,用于根據(jù)所述容器寬度和所述終端的屏幕寬度確定所述容器的縮放比例;縮放屬性設(shè)置模塊,用于通過腳本語言為所述容器動態(tài)設(shè)置縮放屬性,其中所述容器的縮放比例為所述縮放屬性的參數(shù);縮放模塊,用于根據(jù)所述縮放比例對所述容器中的待顯示頁面進行等比例縮放;顯示模塊,用于將等比例縮放后的所述待顯示頁面顯示在所述終端。9.根據(jù)權(quán)利要求8所述的裝置,其特征在于,縮放比確定模塊用于確定所述終端的屏幕寬度除以所述容器寬度的商為所述容器的縮放比例。10.根據(jù)權(quán)利要求9所述的裝置,其特征在于,數(shù)據(jù)嵌套模塊用于通過div標簽嵌套所述待顯示頁面數(shù)據(jù);和/或,所述CSS自適應(yīng)擴充屬性為display:table()屬性;和/或,所述裝置還包括屏幕寬度獲取模塊和容器寬度獲取模塊,其中:屏幕寬度獲取模塊,用于通過javascript的document·documentelement·clientwidth方法獲取所述終端的屏幕寬度;容器寬度獲取模塊,用于通過javascript的offsetwidth方法獲取所述容器寬度。11.根據(jù)權(quán)利要求8-10中任一項所述的裝置,其特征在于,還包括限制標簽添加模塊和隱藏屬性設(shè)置模塊,其中:限制標簽添加模塊,用于對所述容器添加限制標簽,其中,限制標簽的寬度就是屏幕寬度,限制標簽的高度就是容器縮放以后的高度;隱藏屬性設(shè)置模塊,用于為所述限制標簽設(shè)置隱藏屬性,以隱藏所述容器縮放后超出所述限制標簽的留白部分。12.根據(jù)權(quán)利要求11所述的裝置,其特征在于,所述限制標簽的寬、高通過javascript動態(tài)設(shè)置;所述隱藏屬性為overflow:hidden()屬性。13.根據(jù)權(quán)利要求8-10中任一項所述的裝置,其特征在于,縮放模塊用于對所述待顯示頁面內(nèi)的所有子元素同步進行等比例縮放,其中,所述容器中的待顯示頁面進行等比例縮放的縮放中心點為容器左上端點。14.根據(jù)權(quán)利要求8-10中任一項所述的裝置,其特征在于,所述容器有多個,多個待顯示頁面通過多個容器在所述終端顯示。15.-種終端內(nèi)容適配顯示裝置,其特征在于,包括存儲器和處理器,其中:存儲器,用于存儲指令;處理器,用于執(zhí)行所述指令,使得所述裝置執(zhí)行實現(xiàn)如權(quán)利要求1-7中任一項所述的方法的操作。16.-種終端,其特征在于,包括如權(quán)利要求8-15中任一項所述的裝置?!疚臋n編號】G06F17/30GK105975576SQ201610289444【公開日】2016年9月28日【申請日】2016年5月4日【發(fā)明人】石汀鷺【申請人】北京京東尚科信息技術(shù)有限公司,北京京東世紀貿(mào)易有限公司
網(wǎng)友詢問留言 已有0條留言
  • 還沒有人留言評論。精彩留言會獲得點贊!
1