本發(fā)明涉及互聯(lián)網(wǎng)內(nèi)容服務技術，尤其涉及一種手機終端的網(wǎng)頁適配方法及其系統(tǒng)。
背景技術：
：隨著互聯(lián)網(wǎng)領域不斷發(fā)展以及手機的普及性越來越廣泛，手機網(wǎng)絡應用的現(xiàn)狀也越來越復雜。目前手機的型號越來越多，而且不同的手機型號的屏幕大小各異，其分辨率也各不相同。此外，經(jīng)過界面適配的webapp和原始wap差別很大，webapp頁面設計精美，能很好地輔助企業(yè)宣傳、提高企業(yè)形象；功能多樣化，可以很好地幫助企業(yè)做移動營銷。原始wap以文字展示為主，頁面設計難以做到精美，功能簡單。因此，目前的技術難以實現(xiàn)手機網(wǎng)站適配所有型號的手機以及適配手機屏幕的所有分辨率，達到手機終端訪問的頁面能夠在手機屏幕上全屏且清晰顯示的目的，以及讓終端發(fā)揮出最大作用，降低終端及其整個訪問過程的效率。技術實現(xiàn)要素：為了解決現(xiàn)有技術的缺點，本發(fā)明提供一種手機終端的網(wǎng)頁適配方法。這方法能夠把不適合手機屏幕的網(wǎng)頁轉(zhuǎn)變?yōu)閯討B(tài)適合屏幕網(wǎng)頁，進而通過移動終端的瀏覽器來訪問，在開發(fā)跨平臺的應用時，可以充分利用移動終端瀏覽器的html特性。為實現(xiàn)上述目的，本發(fā)明采用以下技術方案：本發(fā)明的一種手機終端的網(wǎng)頁適配方法，包括：用戶側(cè)手機終端的瀏覽器向網(wǎng)頁服務器發(fā)送訪問頁面請求，網(wǎng)頁服務器響應此請求且發(fā)送被請求訪問的頁面數(shù)據(jù)至手機終端的瀏覽器；網(wǎng)頁服務器解析手機終端的瀏覽器接收的訪問頁面數(shù)據(jù)，獲取對應于手機終端特性的頁面屬性的值；根據(jù)獲取的頁面屬性的值，得到與手機終端屏幕相匹配的頁面，最后由網(wǎng)頁服務器發(fā)送至手機終端并在手機終端屏幕中顯示匹配后的頁面。進一步的，所述對應于手機終端特性的頁面屬性包括：顯示寬度和高度、適應手機終端屏幕的分辨率以及文件格式。進一步的，獲取對應于手機終端特性的頁面屬性的值之后還包括：網(wǎng)頁服務器還設置變量容器來存儲對應于手機終端特性的頁面屬性的值。進一步的，在手機終端屏幕中顯示匹配后的頁面的過程中，利用調(diào)取瀏覽器中background-size屬性使得匹配后的頁面完全適配手機終端屏幕。進一步的，得到的與手機終端屏幕相匹配的頁面為動態(tài)css樣式，經(jīng)預設時間延遲后在手機終端屏幕中顯示匹配后的頁面，避免頁面元素短暫錯位的現(xiàn)象。本發(fā)明還提供了一種手機終端的網(wǎng)頁適配系統(tǒng)。本發(fā)明的一種手機終端的網(wǎng)頁適配系統(tǒng)，包括網(wǎng)頁服務器，所述網(wǎng)頁服務器包括：訪問頁面請求響應模塊，其用于接收用戶側(cè)手機終端的瀏覽器發(fā)送的訪問頁面請求，響應此請求且發(fā)送被請求訪問的頁面數(shù)據(jù)至手機終端的瀏覽器；頁面數(shù)據(jù)解析模塊，其用于解析手機終端的瀏覽器接收的訪問頁面數(shù)據(jù)，獲取對應于手機終端特性的頁面屬性的值；頁面匹配模塊，其用于根據(jù)獲取的頁面屬性的值，得到與手機終端屏幕相匹配的頁面，最后發(fā)送至手機終端并在手機終端屏幕中顯示匹配后的頁面。進一步的，所述對應于手機終端特性的頁面屬性包括：顯示寬度和高度、適應手機終端屏幕的分辨率以及文件格式。進一步的，所述網(wǎng)頁服務器包括：變量容器設置模塊，其用于設置變量容器來存儲對應于手機終端特性的頁面屬性的值。進一步的，在頁面匹配模塊中，利用調(diào)取瀏覽器中background-size屬性使得匹配后的頁面完全適配手機終端屏幕。進一步的，得到的與手機終端屏幕相匹配的頁面為動態(tài)css樣式，經(jīng)預設時間延遲后在手機終端屏幕中顯示匹配后的頁面，避免頁面元素短暫錯位的現(xiàn)象。與現(xiàn)有技術相比，本發(fā)明的有益效果是：(1)本發(fā)明把原生不適合手機屏幕的網(wǎng)頁轉(zhuǎn)變?yōu)閯討B(tài)適合屏幕網(wǎng)頁，進而通過移動設備的瀏覽器來訪問，其優(yōu)勢在于開發(fā)跨平臺的應用時，可以充分利用現(xiàn)代移動瀏覽器的html特性。(2)本發(fā)明減少了不必要的重復開發(fā)，造成修改需求時，對一個相同的功能返回重復修改，此方法修改一個地方就可以改變需求。附圖說明構(gòu)成本申請的一部分的說明書附圖用來提供對本申請的進一步理解，本申請的示意性實施例及其說明用于解釋本申請，并不構(gòu)成對本申請的不當限定。圖1是本發(fā)明的一種手機終端的網(wǎng)頁適配方法的流程圖；圖2是本發(fā)明的一種手機終端的網(wǎng)頁適配系統(tǒng)的結(jié)構(gòu)示意圖。具體實施方式應該指出，以下詳細說明都是例示性的，旨在對本申請?zhí)峁┻M一步的說明。除非另有指明，本文使用的所有技術和科學術語具有與本申請所屬
技術領域：
的普通技術人員通常理解的相同含義。需要注意的是，這里所使用的術語僅是為了描述具體實施方式，而非意圖限制根據(jù)本申請的示例性實施方式。如在這里所使用的，除非上下文另外明確指出，否則單數(shù)形式也意圖包括復數(shù)形式，此外，還應當理解的是，當在本說明書中使用術語“包含”和/或“包括”時，其指明存在特征、步驟、操作、器件、組件和/或它們的組合。圖1是本發(fā)明的一種手機終端的網(wǎng)頁適配方法的流程圖。如圖1所示，本發(fā)明的一種手機終端的網(wǎng)頁適配方法，包括：s101：用戶側(cè)手機終端的瀏覽器向網(wǎng)頁服務器發(fā)送訪問頁面請求，網(wǎng)頁服務器響應此請求且發(fā)送被請求訪問的頁面數(shù)據(jù)至手機終端的瀏覽器。s102：網(wǎng)頁服務器解析手機終端的瀏覽器接收的訪問頁面數(shù)據(jù)，獲取對應于手機終端特性的頁面屬性的值。其中，所述對應于手機終端特性的頁面屬性包括：顯示寬度和高度、適應手機終端屏幕的分辨率以及文件格式。進一步地，獲取對應于手機終端特性的頁面屬性的值之后還包括：網(wǎng)頁服務器還設置變量容器來存儲對應于手機終端特性的頁面屬性的值。s103：根據(jù)獲取的頁面屬性的值，得到與手機終端屏幕相匹配的頁面，最后由網(wǎng)頁服務器發(fā)送至手機終端并在手機終端屏幕中顯示匹配后的頁面。具體地，在手機終端屏幕中顯示匹配后的頁面的過程中，利用調(diào)取瀏覽器中background-size屬性使得匹配后的頁面完全適配手機終端屏幕。其中，得到的與手機終端屏幕相匹配的頁面為動態(tài)css樣式，經(jīng)預設時間延遲后在手機終端屏幕中顯示匹配后的頁面，避免頁面元素短暫錯位的現(xiàn)象。下面采用設計圖寬度為480像素的來進行舉例說明。設計圖的寬高之比應該小于或者等于3:5；因為大多數(shù)手機分辨率的都大于或者等于3:5的比例。這樣設計圖的高做高一些至少可以保證不同的手機在一屏顯示下不會出現(xiàn)因為效果圖不夠高而造成瀏覽器底部出現(xiàn)body顏色的情況。究其原因是因為圖片像素較低。如果采用640寬度的來做。清晰度是很不錯了。但圖片太大了。介于移動端網(wǎng)站。網(wǎng)站的加載速度以及不同用戶的網(wǎng)速都需要考慮在內(nèi)。所以以480px寬度的來做在清晰度和加載速度中較為平衡。該效果的寬度是480px；內(nèi)容框是402*460，距離上面和左邊的邊距是128和40；根據(jù)效果圖的展示初步就可以開始切頁面進行頁面布局了。由于要適配不同手機的瀏覽器，使其寬度滿屏填充。所以樣式也要寫動態(tài)的。而不是固定的。使用jquery寫法很簡便。就導入一個jquery文件。在js代碼中，首先，定義一個pingkuan的全局變量。此變量用來存儲當前手機屏幕的寬度。由于最外層的容器demo的width設置為100％；它是寬度平鋪滿手機屏幕的。所以這里取它的寬度為當前手機屏幕的寬度是很準確的。比使用$(window).width()更精準一些。其中，最外層的容器為：viewport(視口)。屏寬確定之后，在設定一個比例的變量，這個變量就是以當前手機屏幕的寬度除以當前設計圖的寬度來作為基準來算的一個比值。有了這個比值就可以根據(jù)效果圖里元素的實際的寬度、邊距離來適配所有手機屏幕了。為了使背景完全平鋪寬高。則使用了background-size屬性，讓其x和y軸都鋪滿。所有的動態(tài)css樣式都包含在quanbujs()函數(shù)中，并且最后加了一個定時器，延遲100毫秒執(zhí)行，為什么要這么做呢，是因為要兼容android系統(tǒng)手機的一個bug。因為在網(wǎng)站載入前，android默認的屏寬永遠是固定的值800，延遲后獲取的寬度就是正常的屏幕寬度了。至于初始時將最外層容器的透明度設為0，延遲100毫秒后再恢復成1。也是為了這個bug。否則頁面在未加載完時因為css動態(tài)的原因，會造成頁面元素短暫錯位的現(xiàn)象。viewport(視口)：移動端瀏覽器在一個通常比屏幕更寬的虛擬“窗口”(視口)中渲染頁面，從而無需將所有頁面都壓縮進小屏幕里(那樣會把很多沒有針對移動端進行優(yōu)化的站點打亂)?？梢酝ㄟ^平移和縮放來瀏覽頁面的不同區(qū)域。大部分的移動端瀏覽器使用一個默認的視口寬度，這意味著視口將會用這個尺寸放大頁面，使所有的元素放進這個視口，從而渲染整個頁面。表1各個瀏覽器的默認視口寬度safarioperaandroidwebkitie980px850px800px974px像素密度dp和像素px的換算公式px＝dp*(dpi/160)，等值的css里面的px在手機屏幕上占多大的位置，這不是固定的，還要取決于屏幕的分辨率dpi。因為手機會根據(jù)dpi，對頁面進行自動縮放來協(xié)調(diào)屏幕像素和尺寸之間的比例來顯示效果,基值是160dpi。意思是160dpi的設備里(一般分辨率是320*480)，1dp＝1px。當前設備的dp:px是多少，也就是頁面在分辨率高于或者低于320寬度分辨率的時候，對應的縮放比例。dp，density-independentpixels，一個基于計算機坐標系統(tǒng)的物理測量單元，代表一個抽象的像素并用于基礎系統(tǒng)的app，如何換算成物理像素，以160ppi屏幕為標準，則1dp＝1px，dpi/ppi，pixelsperinch。分辨率是一種在手機尺寸下可以顯示的像素個數(shù)，比如，640*960分辨率意味著寬度是960個像素而高度是640個像素。表2viewport參數(shù)本發(fā)明把原生不適合手機屏幕的網(wǎng)頁轉(zhuǎn)變?yōu)閯討B(tài)適合屏幕網(wǎng)頁，進而通過移動設備的瀏覽器來訪問，其優(yōu)勢在于開發(fā)跨平臺的應用時，可以充分利用現(xiàn)代移動瀏覽器的html特性。本發(fā)明減少了不必要的重復開發(fā)，造成修改需求時，對一個相同的功能返回重復修改，此方法修改一個地方就可以改變需求。圖2是本發(fā)明的一種手機終端的網(wǎng)頁適配系統(tǒng)的結(jié)構(gòu)示意圖。如圖2所示，本發(fā)明的一種手機終端的網(wǎng)頁適配系統(tǒng)，包括網(wǎng)頁服務器，所述網(wǎng)頁服務器包括：(1)訪問頁面請求響應模塊，其用于接收用戶側(cè)手機終端的瀏覽器發(fā)送的訪問頁面請求，響應此請求且發(fā)送被請求訪問的頁面數(shù)據(jù)至手機終端的瀏覽器；(2)頁面數(shù)據(jù)解析模塊，其用于解析手機終端的瀏覽器接收的訪問頁面數(shù)據(jù)，獲取對應于手機終端特性的頁面屬性的值；其中，所述對應于手機終端特性的頁面屬性包括：顯示寬度和高度、適應手機終端屏幕的分辨率以及文件格式。(3)頁面匹配模塊，其用于根據(jù)獲取的頁面屬性的值，得到與手機終端屏幕相匹配的頁面，最后發(fā)送至手機終端并在手機終端屏幕中顯示匹配后的頁面。其中，在頁面匹配模塊中，利用調(diào)取瀏覽器中background-size屬性使得匹配后的頁面完全適配手機終端屏幕。得到的與手機終端屏幕相匹配的頁面為動態(tài)css樣式，經(jīng)預設時間延遲后在手機終端屏幕中顯示匹配后的頁面，避免頁面元素短暫錯位的現(xiàn)象。進一步的，所述網(wǎng)頁服務器包括：變量容器設置模塊，其用于設置變量容器來存儲對應于手機終端特性的頁面屬性的值。本發(fā)明把原生不適合手機屏幕的網(wǎng)頁轉(zhuǎn)變?yōu)閯討B(tài)適合屏幕網(wǎng)頁，進而通過移動設備的瀏覽器來訪問，其優(yōu)勢在于開發(fā)跨平臺的應用時，可以充分利用現(xiàn)代移動瀏覽器的html特性。本發(fā)明減少了不必要的重復開發(fā)，造成修改需求時，對一個相同的功能返回重復修改，此方法修改一個地方就可以改變需求。上述雖然結(jié)合附圖對本發(fā)明的具體實施方式進行了描述，但并非對本發(fā)明保護范圍的限制，所屬領域技術人員應該明白，在本發(fā)明的技術方案的基礎上，本領域技術人員不需要付出創(chuàng)造性勞動即可做出的各種修改或變形仍在本發(fā)明的保護范圍以內(nèi)。當前第1頁12