本發(fā)明涉及web軟件前端技術領域，特別是涉及一種兼容不同瀏覽器和終端設備的頁面訪問方法。

背景技術：

隨著網(wǎng)絡技術的發(fā)展，用戶對網(wǎng)絡產(chǎn)品的依賴性越來越高。另外，隨著手機、平板電腦等移動設備的普及，用戶通過手機、平板等來進行訪問網(wǎng)頁已經(jīng)成為一種主流，而傳統(tǒng)的pc(personalcomputer)端因為瀏覽器版本兼容性問題導致用戶體驗下降。

目前用戶的主流體驗包括兩個方面：一方面隨著顯示技術的發(fā)展顯示器由1080p逐漸過渡到2k、4k等分辨率，尺寸、分辨率提升的同時，用戶對互聯(lián)網(wǎng)系統(tǒng)的要求越來越高，用戶希望能在大屏的顯示器上看見更大的字體，更豐滿的圖片等；另一方面軟件開發(fā)商除了需要提供默認的風格外，還需要根據(jù)特定的用戶群，或者單獨的用戶滿足其“私人定制”的需求。

為滿足上述用戶的主流體驗，主要有以下兩種做法：第一，為解決瀏覽器兼容性問題在引入的css(英文全稱cascadingstylesheets，中文簡稱：層疊樣式表)文件中設置只有某種特定瀏覽器能夠識別的“偽類”，這樣特定瀏覽器就只能讀取這個“偽類”的樣式；第二，為解決多顯示設備、多分辨率問題在頁面加載完成后，通過執(zhí)行一個腳本來判斷設備類型、分辨率大小來動態(tài)引入對應的css；為滿足用戶個性化需求，提供了若干皮膚允許用戶自行切換。

上述現(xiàn)有做法在解決獨立問題時都存在一定的缺陷，例如，采用“偽類”的方式雖然可以一定程度上解決瀏覽器兼容問題，但目前市面上瀏覽器種類繁多，主流的ie6-ie11、chrome、firefox、safari、360等加起來就有15種以上，“偽類”的數(shù)量大增，導致css過于臃腫，在互聯(lián)網(wǎng)發(fā)展的今天，這會導致網(wǎng)站的下行流量大增，增加服務器負擔影響用戶體驗；再例如，動態(tài)執(zhí)行腳本的方式可以解決跨設備的問題，但是由于是二段加載，部分客戶端會有較為明顯的卡頓，影響用戶體驗。

綜上所述，現(xiàn)有技術缺乏既支持多顯示設備，又支持多分辨率、多瀏覽器的web瀏覽方案。

技術實現(xiàn)要素：

鑒于以上所述現(xiàn)有技術的缺點，本發(fā)明的目的在于提供一種兼容不同瀏覽器和終端設備的頁面訪問方法，用于解決在現(xiàn)有終端通過瀏覽器訪問web頁面時的兼容性不理想和訪問不夠穩(wěn)定性的問題。

為實現(xiàn)上述目的及其他相關目的，本發(fā)明提供以下技術方案：

一種兼容不同瀏覽器和終端設備的頁面訪問方法，包括：由運行在終端設備中的瀏覽器向web服務器發(fā)送請求，所述請求至少包括當前所述終端設備的配置信息和所述瀏覽器的版本信息；所述web服務器應答所述請求，加載預設的第一資源目錄和第二資源目錄并從其中對應篩選出與所述配置信息和版本信息匹配的第一樣式文件和第二樣式文件，并將應答結果返回所述瀏覽器；所述瀏覽器接收所述應答結果，按設定的引入順序規(guī)則和優(yōu)先級規(guī)則依次引入第一樣式文件和第二樣式文件中的資源且第二樣式文件中的資源將覆蓋第一樣式文件中與其相同的資源，在所述瀏覽器的頁面上加載所述資源。

優(yōu)選地，在發(fā)送請求前，還包括步驟：在瀏覽器上登錄web服務器建立會話時，獲取所述終端設備的配置信息和所述瀏覽器的版本信息，并將將其存儲到所述會話中。

優(yōu)選地，所述引入順序規(guī)則為：依據(jù)瀏覽器發(fā)送的請求按先后順序依次引入第一資源目錄和第二資源目錄下的資源。

優(yōu)選地，所述優(yōu)先級規(guī)則為：依據(jù)所述引入順序規(guī)則設定先引入的資源的優(yōu)先級等級低于后引入的資源的優(yōu)先級等級，且在引入相同資源時由高優(yōu)先級的資源覆蓋低優(yōu)先級的資源。

優(yōu)選地，所述第一資源目錄下的資源為全局樣式，而第二資源目錄下的資源為用戶樣式。

優(yōu)選地，所述第一資源目錄和第二資源目錄為預先設置的系統(tǒng)級資源目錄，每個資源目錄下包括多個存放css文件的主題目錄。

優(yōu)選地，所述主題目錄至少包括基本樣式目錄、瀏覽器目錄、屏幕目錄及風格目錄中的一種或多種。

優(yōu)選地，所述終端設備為以下至少一種電子設備：pc電腦、平板電腦、筆記本電腦以及智能手機。

優(yōu)選地，所述終端設備的配置信息至少包括終端設備的類型和顯示屏幕的分辨率。

優(yōu)選地，所述版本信息至少包括瀏覽器的類型。

如上所述，本發(fā)明具有以下有益效果：本發(fā)明通過系統(tǒng)級定義全局樣式，用戶級定義針對某類用戶或者某個用戶的個性化樣式，瀏覽器級將各個瀏覽器的樣式分割成不同文件分而治之解決瀏覽器兼容問題，屏幕級定義各種大小顯示設備上的字體、間距、圖片等內容，風格級定義允許用戶切換的各種，頁面級定義了某個頁面特有的樣式擁有最高優(yōu)先級。根據(jù)css樣式規(guī)則，后輸出的資源在同名時具有高優(yōu)先級，即后輸出的樣式覆蓋先輸出的樣式。固能支持多顯示設備，又支持多分辨率、多瀏覽器，還能夠滿足用戶的個性化需求。

附圖說明

圖1為一種兼容不同瀏覽器和終端設備的網(wǎng)頁訪問方法的實現(xiàn)方案流程圖。

具體實施方式

以下通過特定的具體實例說明本發(fā)明的實施方式，本領域技術人員可由本說明書所揭露的內容輕易地了解本發(fā)明的其他優(yōu)點與功效。本發(fā)明還可以通過另外不同的具體實施方式加以實施或應用，本說明書中的各項細節(jié)也可以基于不同觀點與應用，在沒有背離本發(fā)明的精神下進行各種修飾或改變。需說明的是，在不沖突的情況下，以下實施例及實施例中的特征可以相互組合。

見圖1，本實施例提供一種兼容不同瀏覽器和終端設備的網(wǎng)頁訪問方法，所述方法包括以下步驟：

步驟s10，由運行在終端設備中的瀏覽器向web服務器發(fā)送請求，所述請求至少包括當前所述終端設備的配置信息和所述瀏覽器的版本信息。

在具體實施中，所述終端設備可以是現(xiàn)有的pc電腦、平板電腦、筆記本電腦以及智能手機等形式的電子設備，應當理解，這里的終端設備還可以是能夠運行瀏覽器的電子設備，并不僅限于前述例舉的電子設備。

在具體實施中，所述瀏覽器為可以在終端設備上運行的瀏覽器，例如ie瀏覽器、谷歌瀏覽器、firefox瀏覽器(火狐瀏覽器)、360瀏覽器等現(xiàn)有瀏覽器，當然，實際并不限于上述例舉的瀏覽器。

在具體實施中，由運行在終端設備中的瀏覽器向web服務器發(fā)送請求，可以是在瀏覽器與web服務器建立會話之后的任一請求，其中，該請求中可以包括該瀏覽器所在終端設備的配置信息和該瀏覽器的版本信息。具體得，所述終端設備的配置信息至少包括終端設備的類型和顯示屏幕的分辨率，例如，終端設備的類型為pc電腦，顯示屏幕的分辨率為1080p；再例如，終端設備的類型為智能手機，顯示屏幕的分辨率為720p等。

步驟s20，所述web服務器應答所述請求，引入第一資源目錄和第二資源目錄，并從所述第一資源目錄和第二資源目錄中對應加載出與所述配置信息和版本信息匹配的第一樣式文件和第二樣式文件，并予以返回所述瀏覽器。

在具體實施中，第一資源目錄和第二資源目錄是預先設置的系統(tǒng)級資源目錄，第一資源目錄下包括多個用于存放css文件的主題目錄，例如瀏覽器(browsers)、屏幕(screens)、風格(theme)等，這些都是與用戶無關的標準通用樣式，每個主題目錄下還可以包括多個具體的適用于具體用戶的css文件。此外，第二資源目錄也一樣，其包括多個主題目錄，而且樣式目錄的主題名稱可以和第一資源目錄一樣，同樣，每個主題目錄下也包括多個具體的css文件，與上述第一資源目錄下的css文件不同的是，這里的每個css文件是針對用的，用于滿足不同用戶的兼容性。簡單來說，第一資源目錄下的資源(即css文件，下同)為全局樣式，而第二資源目錄下的資源為用戶樣式(即針對用戶所使用的終端設備和運行的瀏覽器而預先設定的)。

例如，可以這樣來建立第一資源目錄：

先建立一個缺省樣式的根目錄clientfiles,用來將所有系統(tǒng)自帶的資源同統(tǒng)一管理。在根目錄clientfiles下建立base、browsers、screens、theme目錄，其中base目錄中存放所有瀏覽器、屏幕、風格、用戶均無關的標準通用樣式、腳本以及圖片；browsers目錄中僅存放用于解決瀏覽器兼容性的樣式、腳本以及圖片；screens目錄中僅存放用于不同顯示設備、分辨率的圖片、腳本以及圖片；theme目錄中包含了多種風格，每種風格包含各自的樣式、腳本以及圖片。此外，base、browsers、screens、theme的各自子目錄下的css、js文件名需保持一致。

同理，第二資源目錄也可以依據(jù)上述原理來建立，不過第二資源目錄中的資源及css、js文件都是針對某一具體瀏覽器或終端設備的特有樣式。

在具體實施中，web服務器是通過運行每個css文件所在目錄中腳本文件來加載相應的css文件的。

在web服務器應答瀏覽器發(fā)送的請求時，會將第一資源目錄下的所有css文件加載返回至瀏覽器；以及再從第二資源目錄中加載出與該請求中的配置信息和版本信息匹配的特有css文件返回至瀏覽器。

需要理解的是，依據(jù)請求而返回至瀏覽器的所有css文件會依據(jù)預先設置的引入順序和優(yōu)先級規(guī)則來顯示在瀏覽器上，具體的引入順序和優(yōu)先級規(guī)則設定方式可以見下文。

此外，從上述例子可以知道，具體實施中，加載與所述配置信息和版本信息匹配的第一樣式文件和第二樣式文件，可以由web服務器加載腳本文件的方式來實現(xiàn)。

步驟s30，所述瀏覽器接收第一樣式文件和第二樣式文件，并按照設定的引入順序和優(yōu)先級規(guī)則引入所述第一樣式文件和第二樣式文件，并加載在所述瀏覽器的頁面上css文件。

在具體實施中，第一樣式文件是從第一資源目錄中對應加載引入的一個或者多個css文件，同樣，第二樣式文件是從第二資源目錄中對應加載引入的一個或者多個css文件。

在具體實施中，第一樣式文件和第二樣式文件中各css文件在瀏覽器上的引入是按照引入順序和優(yōu)先級規(guī)則進行的。

具體地，可以這樣設置引入順序和優(yōu)先級規(guī)則：依據(jù)web服務器的應答結果按先后順序依次引入第一資源目錄和第二資源目錄下的各主題目錄所在的css文件，且依據(jù)所述先后順序引入的各主題目錄所在的css文件的優(yōu)先級等級依次遞增。簡單來說，第一資源目錄下各主題目錄所在的css文件的引入順序先于第二資源目錄下各主題目錄所在的css文件的引入順序；且第一資源目錄下各主題目錄所在的css文件的優(yōu)先級等級低于第二資源目錄下各主題目錄所在的css文件的優(yōu)先級等級低。按前述引入順序和優(yōu)先級規(guī)則，高優(yōu)先級的資源會覆蓋低優(yōu)先級的資源，從而可以讓僅適于某一瀏覽器或/和終端設備的樣式可以順利被輸出至瀏覽器，進而使得在任一瀏覽器和任一終端設備上訪問web服務器都能夠被兼容。

例如，可以這樣來設置從第一資源目錄和第二資源目錄下各主題目錄所在的css文件的入順序和優(yōu)先級規(guī)則，如下表1：

從上述表1可以看出，第一資源目錄下包括base(基本樣式目錄)、browsers(瀏覽器目錄)、screens(屏幕目錄)及theme(風格目錄)等目錄，各目錄下保存有相應的css文件或者有些還有腳本文件。而第二資源目錄下的則對應有browsers(瀏覽器目錄)、screens(屏幕目錄)及theme(風格目錄)等目錄。

上述各主題目錄下的各css文件都設置有相應的引入順序和優(yōu)先級，其中，該引入順序為：第一資源目錄和第二資源目錄下的各主題目錄所對應的css文件依次遞增，例如第一資源目錄下的base(基本樣式目錄)、browsers(瀏覽器目錄)、screens(屏幕目錄)及theme(風格目錄)的引入順序依次為：1、2、3、4；而第二資源目錄下的browsers(瀏覽器目錄)、screens(屏幕目錄)及theme(風格目錄)的引入順序依次為：5、6、7。此外，該優(yōu)先級的排列順序則正好與各主題目錄的引入順序相反，結合前述例子來說，第一資源目錄下的base(基本樣式目錄)、browsers(瀏覽器目錄)、screens(屏幕目錄)及theme(風格目錄)的優(yōu)先級依次為：7、6、5、4；而第二資源目錄下的browsers(瀏覽器目錄)、screens(屏幕目錄)及theme(風格目錄)的優(yōu)先級次為：3、2、1，也即是說第二資源目錄下的theme(風格目錄)的優(yōu)先級最高，而第一資源目錄下的base(基本樣式目錄)的優(yōu)先級最低，如果在瀏覽器上引入相同主題目錄下的css文件，那么優(yōu)先級高的主題目錄下的css文件會覆蓋優(yōu)先級低的主題目錄下的css文件，結合上述例子來說，例如在第一資源目錄和第二資源目錄下都引入了screens(屏幕目錄)下的css文件，那么第二資源目錄下screens(屏幕目錄)的css文件會覆蓋第一資源目錄下screens(屏幕目錄)的css文件會。從而可以達到既支持多顯示設備，又支持多分辨率、多瀏覽器，還能夠滿足用戶的個性化需求。

綜上所述，本發(fā)明通過對相關文件進行目錄劃分、并根據(jù)當前系統(tǒng)配置、瀏覽器信息、頁面信息等，按照優(yōu)先級從低到高的方式經(jīng)過篩選后引入相關文件，保證輸出的樣式文件都是有效的，同時高優(yōu)先級的樣式覆蓋低優(yōu)先級的樣式，從而使用戶在訪問時支持多顯示設備，又支持多分辨率和多瀏覽器。所以，本發(fā)明有效克服了現(xiàn)有技術中的種種缺點而具高度產(chǎn)業(yè)利用價值。

上述實施例僅例示性說明本發(fā)明的原理及其功效，而非用于限制本發(fā)明。任何熟悉此技術的人士皆可在不違背本發(fā)明的精神及范疇下，對上述實施例進行修飾或改變。因此，舉凡所屬技術領域中具有通常知識者在未脫離本發(fā)明所揭示的精神與技術思想下所完成的一切等效修飾或改變，仍應由本發(fā)明的權利要求所涵蓋。