馬亮

摘要：由于互聯(lián)網(wǎng)的普及和展示信息的及時便捷，高?；径冀ㄔO(shè)了pc版網(wǎng)站，這些網(wǎng)站大大提高了高校向外界提供、展示信息的能力，改善了辦公效率。但是，截至2016年12月，我國網(wǎng)民規(guī)模達(dá)7.31億，手機(jī)網(wǎng)民占比達(dá)95.1%，手機(jī)在上網(wǎng)設(shè)備中占據(jù)主導(dǎo)地位。由于通過手機(jī)瀏覽pc版網(wǎng)站操作體驗不佳，很多高校已經(jīng)開始建設(shè)手機(jī)等智能觸屏版網(wǎng)站。本課題組通過調(diào)查研究，結(jié)合對國外的相調(diào)查，對國內(nèi)高校手機(jī)、iPad等觸屏版網(wǎng)站的建設(shè)現(xiàn)狀、模式、及發(fā)展前景進(jìn)行了分析研究。

關(guān)鍵詞：網(wǎng)站；網(wǎng)站建設(shè)；手機(jī)網(wǎng)站；移動網(wǎng)站；觸屏網(wǎng)站

說明：根據(jù)目前現(xiàn)狀，用戶使用的移動觸屏終端主要是手機(jī)，使用iPad等其它移動觸屏設(shè)備較少，本文主要使用“手機(jī)網(wǎng)站”這個詞匯，如果需要將手機(jī)、iPad等移動觸屏終端單獨分析時，本文會說明；本文只所以把研究范圍限定在國內(nèi)，是因為國外和國內(nèi)軟硬件發(fā)展、文化是有差異，但研究時，也會結(jié)合國外的發(fā)展情況。

根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心2017完成的第39次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》，截至2016年12月，我國網(wǎng)民規(guī)模達(dá)7.31億，普及率達(dá)到53.2%，超過全球平均水平3.1個百分點，超過亞洲平均水平7.6個百分點，手機(jī)網(wǎng)民占比達(dá)95.1%，我國手機(jī)網(wǎng)民規(guī)模達(dá)6.95億，增長率連續(xù)三年超過10%，臺式電腦、筆記本電腦的使用率均出現(xiàn)下降。但是，由于高校原來建設(shè)的傳統(tǒng)pc網(wǎng)站，只適合大屏顯示器和鼠標(biāo)操作，并不適合小顯示屏和觸屏手勢操作，導(dǎo)致傳統(tǒng)網(wǎng)站使用手機(jī)、iPad等瀏覽，雖然能基本滿足功能需要，但瀏覽、使用的體驗較差，為了給使用手機(jī)等觸屏設(shè)備的用戶提供更好的用戶體驗，提高辦公效率，很多高校已經(jīng)開始著手建設(shè)手機(jī)版網(wǎng)站。本文通過調(diào)查研究，對國內(nèi)高校手機(jī)、iPad等觸屏版網(wǎng)站的建設(shè)現(xiàn)狀、模式、及發(fā)展前景進(jìn)行了分析研究，結(jié)合國外發(fā)展?fàn)顩r，嘗試提供一些建設(shè)方面的建議供各方參考。

1.國內(nèi)高校手機(jī)版網(wǎng)站建設(shè)現(xiàn)狀

1.1國內(nèi)高校信息化軟硬件現(xiàn)狀

國內(nèi)高校手機(jī)網(wǎng)站建設(shè)現(xiàn)狀，主要由高校信息化軟硬件的水平?jīng)Q定的。經(jīng)過查閱文獻(xiàn)資料、到一部分高校的信息中心走訪，結(jié)合我校的信息化情況，本課題組發(fā)現(xiàn)，國內(nèi)高校中還有相當(dāng)多臺式計算機(jī)較陳舊，安裝的是windows xp系統(tǒng)，而windows7系統(tǒng)在高校占比最大。根據(jù)“友盟+”互聯(lián)網(wǎng)流量分析網(wǎng)站（https：//www.umeng.com/）的數(shù)據(jù)，從2017年2月20至2017年4月1日訪問我校主網(wǎng)站的用戶終端的操作系統(tǒng)及瀏覽器軟件情況如表1-表3所示。移動終端占比較少是合理的，因為此期間主要為上班期間，校內(nèi)職工主要使用臺式機(jī)辦工。

我們以下稱ie8以及ie8以下的ie瀏覽器為ie低版本瀏覽器。下表2顯示，ie低版本瀏覽器表面上點了5.29%，但其他眾多的國內(nèi)瀏覽器也使用ie內(nèi)核，所以真正使用ie低版本瀏覽器的臺式計算機(jī)遠(yuǎn)遠(yuǎn)大于5.29%，表1中的數(shù)據(jù)也有力地支持了這一結(jié)論，表1顯示有14.45%的臺式計算機(jī)還在使用windows xp操作系統(tǒng)，windows xp操作系統(tǒng)預(yù)裝的是ie6瀏覽器，極有可能有14.45%的用戶在使用ie6瀏覽網(wǎng)站，即使部分此類計算機(jī)安裝了獨立的非ie內(nèi)核瀏覽器或者雙內(nèi)核瀏覽器，使用ie低版本瀏覽器的用戶也是一個不容忽視的比例。

我校的這些數(shù)據(jù)，在國內(nèi)高校中并不是特有現(xiàn)象，具有一定的代表性。近幾年，我校的信息化建議相比較其他高校，還算走在前列，信息化水平較高。

1.2國內(nèi)高校手機(jī)版網(wǎng)站建設(shè)現(xiàn)狀

本課題組通過直接瀏覽高校主網(wǎng)站的形式，訪問了國內(nèi)大部分本科院校和一部分高職院校的網(wǎng)站，統(tǒng)計表明近130所高校建設(shè)了手機(jī)版網(wǎng)站，而且高校手機(jī)版網(wǎng)站建設(shè)呈現(xiàn)以下特點：（1）幾乎所有的高校網(wǎng)站都建立在網(wǎng)站群系統(tǒng)之上；（2）西部地區(qū)建設(shè)手機(jī)網(wǎng)站的比例較少，主要集中在沿海較發(fā)達(dá)的地區(qū)，而且影響力較高的院校、本科院校建設(shè)手機(jī)版網(wǎng)站的比例較高；（3）有些手機(jī)版網(wǎng)站在有些瀏覽器（尤其是低版本的ie瀏覽器）兼容性不夠；（4）絕大部分，只針對主網(wǎng)站建設(shè)了手機(jī)版網(wǎng)站。

分析上述現(xiàn)狀的成因，（1）之所以高校幾乎都在使用網(wǎng)站群建設(shè)網(wǎng)站系統(tǒng)，是因為從公司購買的網(wǎng)站群為高校快速的建設(shè)眾多網(wǎng)站提供了基礎(chǔ)架構(gòu)和基礎(chǔ)模塊，公司有更專業(yè)的研發(fā)能力，一般網(wǎng)站群在定期功能升后，安全性、穩(wěn)定性、功能性都要比高校自己從零開發(fā)的網(wǎng)站系統(tǒng)強(qiáng)大很多；（2）手機(jī)版網(wǎng)站建設(shè)首先主要集中在東部沿海發(fā)達(dá)地區(qū)、以及重點院校，是因為這些高校接觸新技術(shù)更及時、技術(shù)人才多、經(jīng)濟(jì)實力較雄厚；（3）有些手機(jī)版網(wǎng)站，使用了css3中的媒體查詢功能，利用一套模板響應(yīng)各種pc、手機(jī)、iPad等各種終端，并沒有專門建設(shè)手機(jī)版網(wǎng)站，這種方案雖然少維護(hù)了一套模板，但由于國內(nèi)高校相當(dāng)一部分Pc設(shè)備比較落后，有的還在運行windows xp，在使用低版本的ie瀏覽器，而這些瀏覽器并不支持css3媒體查詢功能，雖然通過采用一些技術(shù)可以讓這些低版本ie部分支持媒體查詢，但畢竟不是瀏覽器原生支持，在運行中總會有很多問題出現(xiàn)；4、由于手機(jī)等智能終端的出現(xiàn)，導(dǎo)致網(wǎng)站建設(shè)技術(shù)在近10年內(nèi)出現(xiàn)了劇烈的變化，目前還是一個相關(guān)技術(shù)動蕩、逐步完善的階段，pc端的舊版本瀏覽器也在淘汰之中，在此階段，還不宜大規(guī)模建設(shè)手機(jī)版網(wǎng)站。

2.國內(nèi)高校手機(jī)版網(wǎng)站建模式

本課題組訪問了國內(nèi)近130所高校已經(jīng)建設(shè)的手機(jī)版網(wǎng)站，分析發(fā)現(xiàn)這些手機(jī)版網(wǎng)站的建設(shè)模式并不相同，總體來說分為兩類：（1）分別為pc版網(wǎng)站和手機(jī)版網(wǎng)站各提供一套模版；f2膜用客戶端自適應(yīng)響應(yīng)設(shè)計模式，只向用戶推送一套模版和代碼，利用css3的媒體查詢功能，由用戶的瀏覽器根據(jù)自身特性進(jìn)行差異化顯示。經(jīng)過本課題組研究分析，這兩種方式各有利弊。

2.1分別為pc版網(wǎng)站和手機(jī)版網(wǎng)站各提供一套模版

使用此種模式，當(dāng)用戶瀏覽網(wǎng)站的請求到達(dá)服務(wù)器后，由服務(wù)端程序判斷客戶端瀏覽器的特點和設(shè)備情況，然后向客戶端瀏覽器推送符合客戶端軟硬件設(shè)備特點的html流。優(yōu)點如下：（1）由于手機(jī)版和pc版分開，互不影響，在設(shè)計兩個版式時，彼此不受影響，可以做到ui界面、功能迥異，互不干擾；（2）由于兩個版式單獨設(shè)計，發(fā)送給客戶端瀏覽器的代碼比較簡潔，沒有冗余代碼；（3）由于兩個版式單獨設(shè)計，客戶端也不需要加載多余的資源；（4）由于pc端有相當(dāng)一部分瀏覽器還是低版本的ie，無法盡情發(fā)揮html5的功能，但手機(jī)等智能終端的瀏覽器由于發(fā)展晚、起點高，對htm15的支持良好，可以為手機(jī)版網(wǎng)站加載html5標(biāo)簽和功能。缺點如下：（1）需要維護(hù)兩個模板；（2）極有可能導(dǎo)致一條信息，兩個鏈接，這個取決于程序的編寫和站群系統(tǒng)的選擇。

我校此次手機(jī)版網(wǎng)站建設(shè)，使用了此種方式。現(xiàn)在國內(nèi)外各大新聞門戶網(wǎng)站基本上都采用這種形式，有一分部高校也采用了這種方式。但采用兩套模板，往往導(dǎo)致一個信息有兩個信息源，手機(jī)版網(wǎng)站和pc版網(wǎng)站的新聞鏈接不同，這種方式顯然不妥當(dāng)。但是，這種不足主要是采用的站群系統(tǒng)的功能導(dǎo)致，而且這個不足也不是完全不能容忍，事實上普通用戶往往忽視了這個問題，因為他們往往只注重得到信息，并沒有注意信息的鏈接，只有在極個別的情況下，如分享信息的時候才會覺察，但有些站群系統(tǒng)，如webplus，提供了兩種鏈接自動轉(zhuǎn)化功能。我校使用的站群系統(tǒng)就是webplus站群系統(tǒng)。

有些站群系統(tǒng)可以在為手機(jī)和pc提供不同模板的同時，能保證一篇新聞只有一個鏈接。如博達(dá)軟件的站群系統(tǒng)、動易公司的站群系統(tǒng)等。其中博達(dá)軟件的站群從表面上看（因為課題組時間有限，不可能對所有的站群進(jìn)行深人的研究），提供了更好的方式，它使用靜態(tài)網(wǎng)頁生成技術(shù)的同時，在保證了一個信息只有一個鏈接的情況下，能向手機(jī)版用戶、iPad用戶、pc版用戶提供不同的前臺展示模板，這個站群系統(tǒng)利用了cookie技術(shù)、偽靜態(tài)網(wǎng)頁技術(shù)，很好的完成了這一功能。動易系統(tǒng)雖然有靜態(tài)網(wǎng)站生成功能，他們并不贊成使用，他們會認(rèn)為啟用靜態(tài)網(wǎng)頁生成功能會導(dǎo)致系統(tǒng)復(fù)雜，這個觀點有分部道理，他們一直致力于整個系統(tǒng)使用動態(tài)網(wǎng)站技術(shù)。動易系統(tǒng)如果啟用了手機(jī)版網(wǎng)站必須使用動態(tài)技術(shù)，不能使用靜態(tài)網(wǎng)頁技術(shù)。啟用靜態(tài)網(wǎng)頁技術(shù)除了考慮安全性之外，主要考慮的是訪問速度問題，由于靜態(tài)網(wǎng)頁在服務(wù)端已經(jīng)生成，用戶訪問時只是取得靜態(tài)網(wǎng)頁的過程，而動態(tài)網(wǎng)頁技術(shù)導(dǎo)致用戶每次訪問鏈接，都要由服務(wù)器程序即時執(zhí)行程序得到用戶所需要的html流，然后發(fā)給用戶，加重了服務(wù)器訪的負(fù)擔(dān)，由于訪問頁面時延較長些，會導(dǎo)致用戶體驗稍微不佳，但由于現(xiàn)在配置較好的服務(wù)器，運算速度較快，如果采用性能優(yōu)良的服務(wù)器，這種時延也可以忽略。但是，一些采用靜態(tài)網(wǎng)頁技術(shù)的站群系統(tǒng)，把制作服務(wù)器和發(fā)布服務(wù)器分開，發(fā)布服務(wù)器暴露上互聯(lián)網(wǎng)上，制作服務(wù)只在校內(nèi)訪問，這種模式的確加強(qiáng)了服務(wù)器的安全性，使制作服務(wù)器不容易受到黑客攻擊。

2.2使用客戶端自適應(yīng)響應(yīng)設(shè)計模式，只向用戶推送一套模版和代碼

此種模式主要使用了css3的媒體查詢功能，服務(wù)器向客戶端瀏覽器無差別推送相同的html流，html流到達(dá)客戶端瀏覽器后，瀏覽器會根據(jù)css3的媒體查詢指令、相關(guān)的js腳本以及自身瀏覽器的特性、設(shè)備特性，最終確定顯示的模塊和顯示風(fēng)格。這種方式有如下優(yōu)點：1）只需要一套模板，維護(hù)時也只針對一套模板；2）由于只是瀏覽器根據(jù)相關(guān)指令調(diào)整顯示效果，信息的鏈接一定是唯一的。缺點如下：1）前文數(shù)據(jù)已經(jīng)分析，目前國內(nèi)pc上的瀏覽還有相當(dāng)一部分是低版本的ie，這部分低版本的ie并不支持css3的媒體查詢功能，如果使用同一個模板，css3的媒體查詢提供了關(guān)鍵的功能，雖然通過采用一些技術(shù)可以讓這些低版本ie部分支持媒體查詢，但畢竟不是瀏覽器原生支持，在運行中總會有很多問題出現(xiàn)；2）低版本ie瀏覽器對html5的支持度很低，而手機(jī)等智能觸屏設(shè)備的瀏覽器對htm15支持良好，如果采用同一個模板，導(dǎo)致不得不采取就低原則，取消很多html5在手機(jī)等智能觸屏設(shè)備上的功能，雖然可以通過技術(shù)進(jìn)行兼容性判斷，但增加了代碼的復(fù)雜度，為以后維護(hù)網(wǎng)站埋下了隱患；3）如果使用同一個模板自適應(yīng)各種終端，由于使用同一個版式進(jìn)行自適應(yīng)，這就導(dǎo)致手機(jī)網(wǎng)站和pc網(wǎng)站在版式上相同影響和遷就，版式設(shè)計風(fēng)格更傾向于趨同，不利于向手機(jī)和pc推送差異化較大的版式；4）如果采用同一個版式，為了使版式在不同設(shè)備和分辨上有不同的展示效果，會導(dǎo)致編寫的客戶端代碼較復(fù)雜，再加上一些兼容性的代碼，導(dǎo)致以后修改網(wǎng)站版式變得困難；5）在使用媒體查詢技術(shù)將手機(jī)版網(wǎng)站和pc端網(wǎng)站統(tǒng)一在一個模板之上，會導(dǎo)致瀏覽器加載無用的代碼和資源，為適應(yīng)pc和觸屏設(shè)備，兩個版式顯示的模塊的方式會有不同，在各種設(shè)備中各種模板極有可能被開啟或者關(guān)閉顯示，但這些模塊的代碼依然要被加載到客戶端瀏覽器，雖然可以在服務(wù)器端根據(jù)客戶端瀏覽器的狀況發(fā)送不同的客戶端代碼，但由于高校的網(wǎng)站基本上都建立在成熟的站群系統(tǒng)之上，而站群系統(tǒng)一般不會在服務(wù)器端提供這種編程功能。

上述相當(dāng)一部分缺點和不足，基本上都是國內(nèi)臺式計算機(jī)設(shè)備陳舊、安裝的操作系統(tǒng)和瀏覽器版本過低造成的，在歐美一些發(fā)達(dá)國家，使用客戶端響應(yīng)模式較流行，國內(nèi)相當(dāng)一部分高校也采用了這種方式，但國內(nèi)高校在采用這種方式的時候，基本都對低版本的ie瀏覽器作了兼容性的考慮，采用的方式有以下幾種：1）當(dāng)ie瀏覽器的版本等于或低于ie8時，沒有響應(yīng)效果，采用固定版式；2）針對pc端瀏覽器，均沒有響應(yīng)效果，只在手機(jī)、iPad等智能觸屏終端上有響應(yīng)式效果；3）對非ie瀏覽器采用響應(yīng)式效果。

3.手機(jī)版網(wǎng)站發(fā)展前景

隨著移動網(wǎng)絡(luò)速度上傳下載速率迅速提升，以及手機(jī)、iPad等智能終端設(shè)備性能的飛速提高，人類使用手機(jī)等智能移動設(shè)備接入互聯(lián)網(wǎng)，處理工作、生活中事務(wù)將會是首先方式。雖然app功能強(qiáng)大，但基于瀏覽器的應(yīng)用有一個優(yōu)勢——不需要安裝。對于只展示、交互較少的互聯(lián)網(wǎng)應(yīng)用，網(wǎng)頁形式將是首選。也許在將來，隨著html5功能的日益完善，app和網(wǎng)頁將會統(tǒng)一。但是，就目前來說，基于瀏覽器的應(yīng)用，在展示信息方面還是不可取代的，這就導(dǎo)致必須要為占網(wǎng)站訪問量最大的手機(jī)用戶設(shè)計適合其設(shè)備特點的網(wǎng)頁版式，提高其瀏覽體驗。

就目前來，兩種建設(shè)手機(jī)網(wǎng)站的模式將并存，因為這兩種模式各有優(yōu)缺點。為各種設(shè)備提供不同的版式，雖然在調(diào)整版式的時候，工作量大一些，但也避免了幾種版式的相互影響，不至于改一處影響全部終端用戶，事實上，如果使用客戶端響應(yīng)式，只提供一種版式，在調(diào)整版式時也不見得就輕松簡單，因為任何代碼的調(diào)整都要考慮到在幾種設(shè)備的效果。

關(guān)于采用何種模式，要考慮以下因素：1）客戶使用的臺式計算機(jī)瀏覽器ie版本，如果是公司內(nèi)網(wǎng)使用，瀏覽器版本高，可以考慮使用客戶端響應(yīng)式，只推送一套版式；2）網(wǎng)站規(guī)模，如果只是幾個簡單的展示頁面，功能較少，可以考慮只推送一套版式；3）使用客戶端響應(yīng)式，其實版式一般為塊狀風(fēng)格，并且手機(jī)版和pc版風(fēng)格一般趨同。