網(wǎng)頁(yè)適配調(diào)整方法及裝置的制造方法
【專利摘要】本發(fā)明實(shí)施例公開了一種網(wǎng)頁(yè)適配調(diào)整方法及裝置,所述方法包括:接收客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求后,向所述客戶端發(fā)送分辨率分析腳本;接收所述客戶端根據(jù)所述分辨率分析腳本計(jì)算出的分辨率調(diào)整參數(shù);根據(jù)所述調(diào)整參數(shù),調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的樣式表語言LESS文件中的變量值,使調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配;將調(diào)整后的LESS文件向所述客戶端發(fā)送,使所述客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并輸出。
【專利說明】
網(wǎng)頁(yè)適配調(diào)整方法及裝置
技術(shù)領(lǐng)域
[0001]本發(fā)明涉及網(wǎng)頁(yè)調(diào)整技術(shù),尤其涉及一種網(wǎng)頁(yè)適配調(diào)整方法及裝置。
【背景技術(shù)】
[0002]現(xiàn)有技術(shù)中,一般是通過JS (javascript)或?qū)盈B樣式表(CSS)獲取客戶端分辨率判斷屏幕所顯示區(qū)域的寬度值和高度值,針對(duì)不同的分辨率值,通過CSS調(diào)整網(wǎng)頁(yè)中元素的高度、寬度、起始位置等參數(shù),使同一網(wǎng)頁(yè)對(duì)應(yīng)不同的表現(xiàn)形式,但均使網(wǎng)頁(yè)達(dá)到最佳狀
??τ O
[0003]但是,現(xiàn)有技術(shù)中,如果需要調(diào)整網(wǎng)頁(yè),需要使用CSS3才能達(dá)到預(yù)期的效果,而目前使用的ΙΕ6-ΙΕ8卻無法完整支持。并且,并不是每種網(wǎng)頁(yè)均適合這種方式去使網(wǎng)頁(yè)達(dá)到最佳效果,如當(dāng)前客戶用web開發(fā)的管理系統(tǒng),多以表單、表格為主,每一個(gè)元素都是不可或缺的功能,內(nèi)容設(shè)計(jì)上也是極盡精簡(jiǎn),客戶沒提出需求時(shí),沒有多余的內(nèi)容也不可以隨意插入擴(kuò)展內(nèi)容。隨著屏幕硬件設(shè)施的日益發(fā)展,越來越多越來越大的屏幕已經(jīng)問世,而可以擴(kuò)展的內(nèi)容畢竟有限,當(dāng)在更加高分辨率的屏幕上,空白區(qū)域始終得不到有效填充。
【發(fā)明內(nèi)容】
[0004]為解決上述技術(shù)問題,本發(fā)明實(shí)施例提供一種網(wǎng)頁(yè)適配調(diào)整方法及裝置。
[0005]本發(fā)明實(shí)施例的技術(shù)方案是這樣實(shí)現(xiàn)的:
[0006]一種網(wǎng)頁(yè)適配調(diào)整方法,包括:
[0007]接收客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求后,向所述客戶端發(fā)送分辨率分析腳本;
[0008]接收所述客戶端根據(jù)所述分辨率分析腳本計(jì)算出的分辨率調(diào)整參數(shù);
[0009]根據(jù)所述調(diào)整參數(shù),調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的樣式表語言LESS文件中的變量值,使調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配;
[0010]將調(diào)整后的LESS文件向所述客戶端發(fā)送,使所述客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并輸出。
[0011]優(yōu)選地,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。
[0012]優(yōu)選地,所述調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的LESS文件中的變量值,包括:
[0013]將CSS文件及圖片文件中的圖片按縮放至所述調(diào)整參數(shù)的比例。
[0014]—種網(wǎng)頁(yè)適配調(diào)整方法,包括:
[0015]接收服務(wù)器端發(fā)送的分辨率分析腳本后,根據(jù)所述分辨率分析腳本中的當(dāng)前的分辨率與客戶端的顯示單元的分辨率計(jì)算分辨率調(diào)整參數(shù);
[0016]將所述調(diào)整參數(shù)向所述服務(wù)器端發(fā)送;
[0017]接收所述服務(wù)器端根據(jù)所述調(diào)整參數(shù)調(diào)整后的LESS文件,并根據(jù)所接收的LESS文件生成網(wǎng)頁(yè)并輸出;其中,調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配。
[0018]優(yōu)選地,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。
[0019]—種網(wǎng)頁(yè)適配調(diào)整裝置,包括:第一接收單元、第一發(fā)送單元、第二接收單元、調(diào)整單元和第二發(fā)送單元,其中:
[0020]第一接收單元,用于接收客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求;
[0021]第一發(fā)送單元,用于向所述客戶端發(fā)送分辨率分析腳本;
[0022]第二接收單元,用于接收所述客戶端根據(jù)所述分辨率分析腳本計(jì)算出的分辨率調(diào)整參數(shù);
[0023]調(diào)整單元,用于根據(jù)所述調(diào)整參數(shù),調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的樣式表語言LESS文件中的變量值,使調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配;
[0024]第二發(fā)送單元,用于將調(diào)整后的LESS文件向所述客戶端發(fā)送,使所述客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并輸出。
[0025]優(yōu)選地,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。
[0026]優(yōu)選地,所述調(diào)整單元,還用于將CSS文件及圖片文件中的圖片按縮放至所述調(diào)整參數(shù)的比例。
[0027]—種網(wǎng)頁(yè)適配調(diào)整裝置,包括:第一接收單元、計(jì)算單元、發(fā)送單元、第二接收單元和生成輸出單元,其中:
[0028]第一接收單元,用于接收服務(wù)器端發(fā)送的分辨率分析腳本;
[0029]計(jì)算單元,用于根據(jù)所述分辨率分析腳本中的當(dāng)前的分辨率與客戶端的顯示單元的分辨率計(jì)算分辨率調(diào)整參數(shù);
[0030]發(fā)送單元,用于將所述調(diào)整參數(shù)向所述服務(wù)器端發(fā)送;
[0031]第二接收單元,用于接收所述服務(wù)器端根據(jù)所述調(diào)整參數(shù)調(diào)整后的LESS文件;其中,調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配;
[0032]生成輸出單元,用于根據(jù)所接收的LESS文件生成網(wǎng)頁(yè)并輸出。
[0033]優(yōu)選地,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。
[0034]本發(fā)明實(shí)施例中,當(dāng)服務(wù)器端接收到客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求后,向所述客戶端發(fā)送分辨率分析腳本;客戶端根據(jù)分辨率分析腳本計(jì)算出的分辨率調(diào)整參數(shù),并向服務(wù)器端發(fā)送;服務(wù)器端根據(jù)調(diào)整參數(shù),調(diào)整客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的樣式表語言LESS文件中的變量值,使調(diào)整后的LESS文件與客戶端的顯示單元的分辨率適配;并將調(diào)整后的LESS文件向客戶端發(fā)送;客戶端將根據(jù)LESS文件生成網(wǎng)頁(yè)并輸出。
[0035]本發(fā)明實(shí)施例的技術(shù)方案,通過等比伸縮的方式完成顯示網(wǎng)頁(yè)分辨率的自適應(yīng),并通過LESS變量控制來生成適應(yīng)不同屏幕的不同的CSS,根據(jù)不同的屏幕高、寬生成相應(yīng)比例的圖片;本發(fā)明實(shí)施例的技術(shù)方案能夠兼容相對(duì)低級(jí)的且占有一定市場(chǎng)的瀏覽器,可自動(dòng)動(dòng)態(tài)擴(kuò)展,適用一切設(shè)備的分辨率;給不適合以內(nèi)容擴(kuò)展來填充空白區(qū)域的方式來利用屏幕空間的網(wǎng)頁(yè),屏幕自適應(yīng)調(diào)整的方式更合理。
【附圖說明】
[0036]圖1為本發(fā)明實(shí)施例一的網(wǎng)頁(yè)適配調(diào)整方法的流程圖;
[0037]圖2為本發(fā)明實(shí)施例二的網(wǎng)頁(yè)適配調(diào)整方法的流程圖;
[0038]圖3為本發(fā)明實(shí)施例三的網(wǎng)頁(yè)適配調(diào)整方法的流程圖;
[0039]圖4為本發(fā)明實(shí)施例一的網(wǎng)頁(yè)適配調(diào)整裝置的組成結(jié)構(gòu)示意圖;
[0040]圖5為本發(fā)明實(shí)施例二的網(wǎng)頁(yè)適配調(diào)整裝置的組成結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0041]為使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清除明白,以下舉實(shí)施例并參照附圖,對(duì)本發(fā)明進(jìn)一步詳細(xì)說明。
[0042]圖1為本發(fā)明實(shí)施例一的網(wǎng)頁(yè)適配調(diào)整方法的流程圖,如圖1所示,本發(fā)明實(shí)施例的網(wǎng)頁(yè)適配調(diào)整方法包括以下步驟:
[0043]步驟101,接收客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求后,向所述客戶端發(fā)送分辨率分析腳本。
[0044]本步驟中,當(dāng)網(wǎng)頁(yè)服務(wù)器接收到客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求后,并不直接向客戶端發(fā)送其所請(qǐng)求的網(wǎng)頁(yè)內(nèi)容,而是先向該客戶端發(fā)送分辨率分析腳本。該分辨率分析腳本是用于獲取客戶端的顯示單元如顯示屏所支持的分辨率的,通過獲取客戶端當(dāng)前所支持的分辨率,以生成適合于客戶端顯示單元顯示的網(wǎng)頁(yè)內(nèi)容,方便客戶端以更佳的顯示效果呈現(xiàn)該網(wǎng)元。
[0045]步驟102,接收所述客戶端根據(jù)所述分辨率分析腳本計(jì)算出的分辨率調(diào)整參數(shù)。
[0046]客戶端接收到分辨率分析腳本后,將根據(jù)該客戶端的顯示單元所支持的分辨率以及所請(qǐng)求的網(wǎng)元當(dāng)前的分辨率,計(jì)算出需調(diào)整的分辨率調(diào)整參數(shù)。該分辨率調(diào)整參數(shù)可以是分辨率調(diào)整比例值。
[0047]步驟103,根據(jù)所述調(diào)整參數(shù),調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的樣式表語言LESS文件中的變量值,使調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配。
[0048]網(wǎng)頁(yè)服務(wù)器接收到客戶端發(fā)送的調(diào)整參數(shù)后,根據(jù)該調(diào)整參數(shù)對(duì)客戶端所請(qǐng)求的網(wǎng)頁(yè)進(jìn)行相應(yīng)調(diào)整。
[0049]本發(fā)明實(shí)施例中,LESS文件中至少包括CSS文件和相關(guān)的圖片文件。而調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的LESS文件中的變量值,包括:將CSS文件及圖片文件中的圖片按縮放至所述調(diào)整參數(shù)的比例。具體地,在開發(fā)網(wǎng)頁(yè)之初,已設(shè)定好一個(gè)基礎(chǔ)值為I倍大小,此處以800X600分辨率為基礎(chǔ)值進(jìn)行說明。例如,當(dāng)確定出客戶端分辨率為1280X720,則計(jì)算1280/800 = 1.6 ;720/600 = 1.2,取比例值中較小的值即1.2,則請(qǐng)求樣式表為“Stylel.2.css”。例如,在LESS文件中,設(shè)置了基礎(chǔ)分辨率寬度是800px,高度是600px,此時(shí)變量值Obase的值是1,圖片文件夾是Oimages,值為imagesl,每個(gè)高寬及位置上都乘以O(shè)base變量,而每個(gè)圖片的路徑都是Oimages。這時(shí),客戶端發(fā)起了對(duì)stylel.2.css的請(qǐng)求。服務(wù)端則將1.2賦給Obase變量,將imagesl.2賦給Oimages變量,同時(shí)生成1.2倍的圖片文件大小至文件夾:imagesl.2。
[0050]步驟104,將調(diào)整后的LESS文件向所述客戶端發(fā)送,使所述客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并輸出。
[0051]網(wǎng)頁(yè)服務(wù)器將調(diào)整后的LESS文件向所述客戶端發(fā)送,客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并向用戶輸出。
[0052]本發(fā)明實(shí)施例的技術(shù)方案,通過等比伸縮的方式完成顯示網(wǎng)頁(yè)分辨率的自適應(yīng),并通過LESS變量控制來生成適應(yīng)不同屏幕的不同的CSS,根據(jù)不同的屏幕高、寬生成相應(yīng)比例的圖片;本發(fā)明實(shí)施例的技術(shù)方案能夠兼容相對(duì)低級(jí)的且占有一定市場(chǎng)的瀏覽器,可自動(dòng)動(dòng)態(tài)擴(kuò)展,適用一切設(shè)備的分辨率;給不適合以內(nèi)容擴(kuò)展來填充空白區(qū)域的方式來利用屏幕空間的網(wǎng)頁(yè),屏幕自適應(yīng)調(diào)整的方式更合理。
[0053]圖2為本發(fā)明實(shí)施例二的網(wǎng)頁(yè)適配調(diào)整方法的流程圖,如圖2所示,本發(fā)明實(shí)施例的網(wǎng)頁(yè)適配調(diào)整方法包括以下步驟:
[0054]步驟201,接收服務(wù)器端發(fā)送的分辨率分析腳本后,根據(jù)所述分辨率分析腳本中的當(dāng)前的分辨率與客戶端的顯示單元的分辨率計(jì)算分辨率調(diào)整參數(shù)。
[0055]客戶端首先向網(wǎng)頁(yè)服務(wù)器發(fā)送網(wǎng)頁(yè)瀏覽請(qǐng)求,網(wǎng)頁(yè)服務(wù)器接收到該網(wǎng)頁(yè)瀏覽請(qǐng)求后,向該客戶端發(fā)送分辨率分析腳本。客戶端接收到分辨率分析腳本后,將根據(jù)該客戶端的顯示單元所支持的分辨率以及所請(qǐng)求的網(wǎng)元當(dāng)前的分辨率,計(jì)算出需調(diào)整的分辨率調(diào)整參數(shù)。該分辨率調(diào)整參數(shù)可以是分辨率調(diào)整比例值。具體地,假設(shè)開發(fā)網(wǎng)頁(yè)之初已設(shè)定好一個(gè)基礎(chǔ)值為I倍大小,此處以800X600分辨率為基礎(chǔ)值進(jìn)行說明。例如,當(dāng)確定出客戶端的顯示單元的分辨率為1280X720時(shí),則計(jì)算1280/800 = 1.6 ;720/600 = 1.2,取比例值中較小的值即1.2,則請(qǐng)求樣式表為“stylel.2.css”。本發(fā)明實(shí)施例中將所請(qǐng)求網(wǎng)頁(yè)的分辨率與客戶端端的顯示單元所支持的分辨率分別進(jìn)行比對(duì),以確定出最終調(diào)整的分辨率調(diào)整參數(shù),該調(diào)整參數(shù)選取橫向及豎向分辨率中比例值最小的。
[0056]步驟202,將所述調(diào)整參數(shù)向所述服務(wù)器端發(fā)送。
[0057]客戶端計(jì)算出需調(diào)整的分辨率調(diào)整參數(shù)后,向網(wǎng)頁(yè)服務(wù)器發(fā)送該分辨率調(diào)整參數(shù)。
[0058]步驟203,接收所述服務(wù)器端根據(jù)所述調(diào)整參數(shù)調(diào)整后的LESS文件,并根據(jù)所接收的LESS文件生成網(wǎng)頁(yè)并輸出;其中,調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配。
[0059]本發(fā)明實(shí)施例中,LESS文件中至少包括CSS文件和相關(guān)的圖片文件。而調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的LESS文件中的變量值,包括:將CSS文件及圖片文件中的圖片按縮放至所述調(diào)整參數(shù)的比例。例如,在LESS文件中,設(shè)置了基礎(chǔ)分辨率寬度是800px,高度是600px,而客戶端計(jì)算出的分辨率調(diào)整參數(shù)為1.2 ;此時(shí)變量值Obase的值是1,圖片文件夾是Oimages,值為imagesl,每個(gè)高寬及位置上都乘以O(shè)base變量,而每個(gè)圖片的路徑都是Oimages。這時(shí),客戶端發(fā)起了對(duì)stylel.2.css的請(qǐng)求。服務(wù)端則將1.2賦給Obase變量,將imagesl.2賦給Oimages變量,同時(shí)生成1.2倍的圖片文件大小至文件夾:imagesl.2。
[0060]網(wǎng)頁(yè)服務(wù)器將調(diào)整后的LESS文件向所述客戶端發(fā)送,客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并向用戶輸出。
[0061]本發(fā)明實(shí)施例的技術(shù)方案,通過等比伸縮的方式完成顯示網(wǎng)頁(yè)分辨率的自適應(yīng),并通過LESS變量控制來生成適應(yīng)不同屏幕的不同的CSS,根據(jù)不同的屏幕高、寬生成相應(yīng)比例的圖片;本發(fā)明實(shí)施例的技術(shù)方案能夠兼容相對(duì)低級(jí)的且占有一定市場(chǎng)的瀏覽器,可自動(dòng)動(dòng)態(tài)擴(kuò)展,適用一切設(shè)備的分辨率;給不適合以內(nèi)容擴(kuò)展來填充空白區(qū)域的方式來利用屏幕空間的網(wǎng)頁(yè),屏幕自適應(yīng)調(diào)整的方式更合理。
[0062]以下通過具體示例,進(jìn)一步闡明本發(fā)明技術(shù)方案的實(shí)質(zhì)。
[0063]圖3為本發(fā)明實(shí)施例三的網(wǎng)頁(yè)適配調(diào)整方法的流程圖,如圖3所示,本發(fā)明實(shí)施例的網(wǎng)頁(yè)適配調(diào)整方法包括:
[0064]步驟1:服務(wù)端接受客戶端發(fā)來的頁(yè)面打開請(qǐng)求
[0065]步驟2:服務(wù)端給客戶端發(fā)送分辨率分析腳本
[0066]客戶端請(qǐng)求到了頁(yè)面服務(wù)端一般都會(huì)把網(wǎng)頁(yè)直接發(fā)給客戶端,此時(shí)在網(wǎng)頁(yè)中的頂部、CSS調(diào)用之前寫入分辨率分析腳本即可。
[0067]步驟3:客戶端根據(jù)分辨率分析腳本得出所需比例值并請(qǐng)求相應(yīng)樣式表。
[0068]在開發(fā)網(wǎng)頁(yè)之初,已設(shè)定好一個(gè)基礎(chǔ)值為I倍大小,此處以800X600分辨率為基礎(chǔ)值進(jìn)行說明。例如,當(dāng)腳本判斷出客戶端分辨率為1280X720,則計(jì)算1280/800=1.6 ;720/600 = 1.2,取較小值四舍五入至小數(shù)點(diǎn)后一位,即1.2,則請(qǐng)求樣式表“stylel.2.css,,。
[0069]步驟5:服務(wù)端根據(jù)請(qǐng)求,改變LESS文件中的變量值并生成所需CSS文件與相關(guān)的圖片文件。
[0070]例如,在LESS文件中,設(shè)置了基礎(chǔ)分辨率寬度是800px,高度是600px,此時(shí)變量值Obase的值是1,圖片文件夾是Oimages,值為imagesl,每個(gè)高寬及位置上都乘以了 Obase變量,而每個(gè)圖片的路徑都是Oimages。這時(shí),客戶端發(fā)起了對(duì)stylel.2.css的請(qǐng)求。服務(wù)端則將1.2賦給Obase變量,將imagesl.2賦給Oimages變量,同時(shí)生成1.2倍的圖片文件大小至文件夾:imagesl.2。當(dāng)然,如果服務(wù)器已存在1.2倍文件大小的文件則直接將1.2倍的CSS發(fā)送給客戶端。
[0071]步驟6:客戶端接受相應(yīng)的樣式表并呈現(xiàn)頁(yè)面。
[0072]本發(fā)明實(shí)施例的技術(shù)方案,通過等比伸縮的方式完成顯示網(wǎng)頁(yè)分辨率的自適應(yīng),并通過LESS變量控制來生成適應(yīng)不同屏幕的不同的CSS,根據(jù)不同的屏幕高、寬生成相應(yīng)比例的圖片;本發(fā)明實(shí)施例的技術(shù)方案能夠兼容相對(duì)低級(jí)的且占有一定市場(chǎng)的瀏覽器,可自動(dòng)動(dòng)態(tài)擴(kuò)展,適用一切設(shè)備的分辨率;給不適合以內(nèi)容擴(kuò)展來填充空白區(qū)域的方式來利用屏幕空間的網(wǎng)頁(yè),屏幕自適應(yīng)調(diào)整的方式更合理。
[0073]圖4為本發(fā)明實(shí)施例一的網(wǎng)頁(yè)適配調(diào)整裝置的組成結(jié)構(gòu)示意圖,如圖4所示,本示例的網(wǎng)頁(yè)適配調(diào)整裝置包括:第一接收單元40、第一發(fā)送單元41、第二接收單元42、調(diào)整單元43和第二發(fā)送單元44,其中:
[0074]第一接收單元40,用于接收客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求;
[0075]第一發(fā)送單元41,用于向所述客戶端發(fā)送分辨率分析腳本;
[0076]第二接收單元42,用于接收所述客戶端根據(jù)所述分辨率分析腳本計(jì)算出的分辨率調(diào)整參數(shù);
[0077]調(diào)整單元43,用于根據(jù)所述調(diào)整參數(shù),調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的樣式表語言LESS文件中的變量值,使調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配;
[0078]第二發(fā)送單元44,用于將調(diào)整后的LESS文件向所述客戶端發(fā)送,使所述客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并輸出。
[0079]上述,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。上述調(diào)整單元43,還用于將CSS文件及圖片文件中的圖片按縮放至所述調(diào)整參數(shù)的比例。具體地,調(diào)整單元43調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的LESS文件中的變量值,包括:在開發(fā)網(wǎng)頁(yè)之初,已設(shè)定好一個(gè)基礎(chǔ)值為I倍大小,此處以800X600分辨率為基礎(chǔ)值進(jìn)行說明。例如,當(dāng)確定出客戶端分辨率為1280 X 720,則計(jì)算1280/800 = 1.6 ;720/600 = 1.2,取比例值中較小的值即1.2,則請(qǐng)求樣式表為“stylel.2.css”。例如,在LESS文件中,設(shè)置了基礎(chǔ)分辨率寬度是800px,高度是600px,此時(shí)變量值Obase的值是1,圖片文件夾是Oimages,值為imagesl,每個(gè)高寬及位置上都乘以O(shè)base變量,而每個(gè)圖片的路徑都是Oimages。這時(shí),客戶端發(fā)起了對(duì)stylel.2.css的請(qǐng)求。服務(wù)端則將1.2賦給Obase變量,將imagesl.2賦給Oimages變量,同時(shí)生成1.2倍的圖片文件大小至文件夾dmagesl.2。
[0080]圖4所示的網(wǎng)頁(yè)適配調(diào)整裝置適用于網(wǎng)頁(yè)服務(wù)器側(cè)。
[0081]本領(lǐng)域技術(shù)人員應(yīng)當(dāng)理解,圖4所示的網(wǎng)頁(yè)適配調(diào)整裝置中各處理單元的功能,可參照前述的網(wǎng)頁(yè)適配調(diào)整方法的相關(guān)描述而理解,本發(fā)明實(shí)施例的網(wǎng)頁(yè)適配調(diào)整裝置中各處理單元,可通過實(shí)現(xiàn)本發(fā)明實(shí)施例所述的功能的模擬電路而實(shí)現(xiàn),也可以通過執(zhí)行本發(fā)明實(shí)施例所述的功能的軟件在智能設(shè)備上的運(yùn)行而實(shí)現(xiàn)。
[0082]圖5為本發(fā)明實(shí)施例二的網(wǎng)頁(yè)適配調(diào)整裝置的組成結(jié)構(gòu)示意圖,如圖5所示,本發(fā)明實(shí)施例的網(wǎng)頁(yè)適配調(diào)整裝置包括:第一接收單元50、計(jì)算單元51、發(fā)送單元52、第二接收單元53和生成輸出單元54,其中:
[0083]第一接收單元50,用于接收服務(wù)器端發(fā)送的分辨率分析腳本;
[0084]計(jì)算單元51,用于根據(jù)所述分辨率分析腳本中的當(dāng)前的分辨率與客戶端的顯示單元的分辨率計(jì)算分辨率調(diào)整參數(shù);
[0085]發(fā)送單元52,用于將所述調(diào)整參數(shù)向所述服務(wù)器端發(fā)送;
[0086]第二接收單元53,用于接收所述服務(wù)器端根據(jù)所述調(diào)整參數(shù)調(diào)整后的LESS文件;其中,調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配;
[0087]生成輸出單元54,用于根據(jù)所接收的LESS文件生成網(wǎng)頁(yè)并輸出。
[0088]本發(fā)明實(shí)施例中,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。
[0089]計(jì)算單元51計(jì)算分辨率調(diào)整參數(shù),具體地,在開發(fā)網(wǎng)頁(yè)之初,已設(shè)定好一個(gè)基礎(chǔ)值為I倍大小,此處以800X600分辨率為基礎(chǔ)值進(jìn)行說明。例如,當(dāng)腳本判斷出客戶端分辨率為1280 X 720,則計(jì)算1280/800 = 1.6 ;720/600 = 1.2,取較小值四舍五入至小數(shù)點(diǎn)后一位,即1.2,則請(qǐng)求樣式表“stylel.2.css”。
[0090]圖5所示的網(wǎng)頁(yè)適配調(diào)整裝置適用于客戶端。
[0091]本領(lǐng)域技術(shù)人員應(yīng)當(dāng)理解,圖5所示的網(wǎng)頁(yè)適配調(diào)整裝置中各處理單元的功能,可參照前述的網(wǎng)頁(yè)適配調(diào)整方法的相關(guān)描述而理解,本發(fā)明實(shí)施例的網(wǎng)頁(yè)適配調(diào)整裝置中各處理單元,可通過實(shí)現(xiàn)本發(fā)明實(shí)施例所述的功能的模擬電路而實(shí)現(xiàn),也可以通過執(zhí)行本發(fā)明實(shí)施例所述的功能的軟件在智能設(shè)備上的運(yùn)行而實(shí)現(xiàn)。
[0092]本發(fā)明實(shí)施例所記載的技術(shù)方案之間,在不沖突的情況下,可以任意組合。
[0093]在本發(fā)明所提供的幾個(gè)實(shí)施例中,應(yīng)該理解到,所揭露的方法、裝置和電子設(shè)備,可以通過其它的方式實(shí)現(xiàn)。以上所描述的設(shè)備實(shí)施例僅僅是示意性的,例如,所述單元的劃分,僅僅為一種邏輯功能劃分,實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式,如:多個(gè)單元或組件可以結(jié)合,或可以集成到另一個(gè)系統(tǒng),或一些特征可以忽略,或不執(zhí)行。另外,所顯示或討論的各組成部分相互之間的耦合、或直接耦合、或通信連接可以是通過一些接口,設(shè)備或單元的間接耦合或通信連接,可以是電性的、機(jī)械的或其它形式的。
[0094]上述作為分離部件說明的單元可以是、或也可以不是物理上分開的,作為單元顯示的部件可以是、或也可以不是物理單元,即可以位于一個(gè)地方,也可以分布到多個(gè)網(wǎng)絡(luò)單元上;可以根據(jù)實(shí)際的需要選擇其中的部分或全部單元來實(shí)現(xiàn)本實(shí)施例方案的目的。
[0095]另外,在本發(fā)明各實(shí)施例中的各功能單元可以全部集成在一個(gè)處理單元中,也可以是各單元分別單獨(dú)作為一個(gè)單元,也可以兩個(gè)或兩個(gè)以上單元集成在一個(gè)單元中;上述集成的單元既可以采用硬件的形式實(shí)現(xiàn),也可以采用硬件加應(yīng)用功能單元的形式實(shí)現(xiàn)。
[0096]本領(lǐng)域普通技術(shù)人員可以理解:實(shí)現(xiàn)上述方法實(shí)施例的全部或部分步驟可以通過程序指令相關(guān)的硬件來完成,前述的程序可以存儲(chǔ)于一計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中,該程序在執(zhí)行時(shí),執(zhí)行包括上述方法實(shí)施例的步驟;而前述的存儲(chǔ)介質(zhì)包括:移動(dòng)存儲(chǔ)設(shè)備、只讀存儲(chǔ)器(ROM,Read-Only Memory)、隨機(jī)存取存儲(chǔ)器(RAM,Random Access Memory)、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。
[0097]或者,本發(fā)明實(shí)施例上述集成的單元如果以應(yīng)用功能模塊的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí),也可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中?;谶@樣的理解,本發(fā)明實(shí)施例的技術(shù)方案本質(zhì)上或者說對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以應(yīng)用產(chǎn)品的形式體現(xiàn)出來,該計(jì)算機(jī)應(yīng)用產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中,包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)、服務(wù)器、或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述方法的全部或部分。而前述的存儲(chǔ)介質(zhì)包括:移動(dòng)存儲(chǔ)設(shè)備、只讀存儲(chǔ)器(ROM,Read-Only Memory)、隨機(jī)存取存儲(chǔ)器(RAM,Random Access Memory)、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。
[0098]本發(fā)明的保護(hù)范圍并不局限于此,熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi),可輕易想到變化或替換,都應(yīng)涵蓋在本發(fā)明的保護(hù)范圍之內(nèi)。
【主權(quán)項(xiàng)】
1.一種網(wǎng)頁(yè)適配調(diào)整方法,其特征在于,所述方法包括: 接收客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求后,向所述客戶端發(fā)送分辨率分析腳本; 接收所述客戶端根據(jù)所述分辨率分析腳本計(jì)算出的分辨率調(diào)整參數(shù); 根據(jù)所述調(diào)整參數(shù),調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的樣式表語言LESS文件中的變量值,使調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配; 將調(diào)整后的LESS文件向所述客戶端發(fā)送,使所述客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并輸出。2.根據(jù)權(quán)利要求1所述的方法,其特征在于,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。3.根據(jù)權(quán)利要求2所述的方法,其特征在于,所述調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的LESS文件中的變量值,包括: 將CSS文件及圖片文件中的圖片按縮放至所述調(diào)整參數(shù)的比例。4.一種網(wǎng)頁(yè)適配調(diào)整方法,其特征在于,所述方法包括: 接收服務(wù)器端發(fā)送的分辨率分析腳本后,根據(jù)所述分辨率分析腳本中的當(dāng)前的分辨率與客戶端的顯示單元的分辨率計(jì)算分辨率調(diào)整參數(shù); 將所述調(diào)整參數(shù)向所述服務(wù)器端發(fā)送; 接收所述服務(wù)器端根據(jù)所述調(diào)整參數(shù)調(diào)整后的LESS文件,并根據(jù)所接收的LESS文件生成網(wǎng)頁(yè)并輸出;其中,調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配。5.根據(jù)權(quán)利要求4所述的方法,其特征在于,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。6.一種網(wǎng)頁(yè)適配調(diào)整裝置,其特征在于,所述裝置包括:第一接收單元、第一發(fā)送單元、第二接收單元、調(diào)整單元和第二發(fā)送單元,其中: 第一接收單元,用于接收客戶端發(fā)送的網(wǎng)頁(yè)瀏覽請(qǐng)求; 第一發(fā)送單元,用于向所述客戶端發(fā)送分辨率分析腳本; 第二接收單元,用于接收所述客戶端根據(jù)所述分辨率分析腳本計(jì)算出的分辨率調(diào)整參數(shù); 調(diào)整單元,用于根據(jù)所述調(diào)整參數(shù),調(diào)整所述客戶端所請(qǐng)求的網(wǎng)頁(yè)對(duì)應(yīng)的樣式表語言LESS文件中的變量值,使調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配; 第二發(fā)送單元,用于將調(diào)整后的LESS文件向所述客戶端發(fā)送,使所述客戶端根據(jù)所述LESS文件生成網(wǎng)頁(yè)并輸出。7.根據(jù)權(quán)利要求6所述的裝置,其特征在于,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。8.根據(jù)權(quán)利要求7所述的裝置,其特征在于,所述調(diào)整單元,還用于將CSS文件及圖片文件中的圖片按縮放至所述調(diào)整參數(shù)的比例。9.一種網(wǎng)頁(yè)適配調(diào)整裝置,其特征在于,所述裝置包括:第一接收單元、計(jì)算單元、發(fā)送單元、第二接收單元和生成輸出單元,其中: 第一接收單元,用于接收服務(wù)器端發(fā)送的分辨率分析腳本; 計(jì)算單元,用于根據(jù)所述分辨率分析腳本中的當(dāng)前的分辨率與客戶端的顯示單元的分辨率計(jì)算分辨率調(diào)整參數(shù); 發(fā)送單元,用于將所述調(diào)整參數(shù)向所述服務(wù)器端發(fā)送; 第二接收單元,用于接收所述服務(wù)器端根據(jù)所述調(diào)整參數(shù)調(diào)整后的LESS文件;其中,調(diào)整后的LESS文件與所述客戶端的顯示單元的分辨率適配; 生成輸出單元,用于根據(jù)所接收的LESS文件生成網(wǎng)頁(yè)并輸出。10.根據(jù)權(quán)利要求9所述的裝置,其特征在于,所述LESS文件中至少包括CSS文件和相關(guān)的圖片文件。
【文檔編號(hào)】G06F17/30GK105989069SQ201510069448
【公開日】2016年10月5日
【申請(qǐng)日】2015年2月10日
【發(fā)明人】馬秋蓉, 譚旭, 楊文松, 李海濤, 李海波
【申請(qǐng)人】中國(guó)移動(dòng)通信集團(tuán)云南有限公司