移動(dòng)版網(wǎng)站構(gòu)建方法探討

南寧學(xué)院 危華明 盧志翔 林 寧

一、引言

伴隨移動(dòng)互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，各類移動(dòng)設(shè)備得到廣泛普及，智能手機(jī)用戶的數(shù)量更是迅猛增長(zhǎng)。據(jù)2018年第41次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告的數(shù)據(jù)顯示，截至2017年12月，我國(guó)手機(jī)網(wǎng)民規(guī)模達(dá)7.53億，網(wǎng)民中使用手機(jī)上網(wǎng)人群的占比由2016年的95.1%提升至97.5%。手機(jī)已成為人們從互聯(lián)網(wǎng)獲取信息的首要工具。

在手機(jī)網(wǎng)民迅猛增加的情勢(shì)之下，幾乎所有用戶都希望能通過(guò)手機(jī)方便、快捷地訪問(wèn)網(wǎng)站。而傳統(tǒng)網(wǎng)站的界面和風(fēng)格都是針對(duì)PC端設(shè)計(jì)的，用戶直接在移動(dòng)設(shè)備上面使用，會(huì)出現(xiàn)諸多問(wèn)題。傳統(tǒng)網(wǎng)站在用戶體驗(yàn)上，不能滿足手機(jī)用戶的需求。

二、智能手機(jī)瀏覽傳統(tǒng)PC網(wǎng)站存在的問(wèn)題

移動(dòng)設(shè)備與PC在分辨率和屏幕顯示方向上都有很大的區(qū)別，并且受網(wǎng)絡(luò)和自身處理能力的限制，當(dāng)用戶使用手機(jī)瀏覽傳統(tǒng)網(wǎng)站時(shí)，都會(huì)出現(xiàn)頁(yè)面布局混亂、無(wú)用信息過(guò)多等現(xiàn)象，頁(yè)面效果不盡如人意。主要的問(wèn)題如下：

第一，由于智能手機(jī)的屏幕尺寸比PC屏幕小，用戶使用智能手機(jī)直接訪問(wèn)傳統(tǒng)網(wǎng)站，往往會(huì)因?yàn)槠聊怀叽绮蛔愣?yè)面變形。即使頁(yè)面不變形，智能手機(jī)上顯示的效果也是PC頁(yè)面的縮小版，過(guò)小的文字、圖片等頁(yè)面元素，不利于用戶瀏覽。

第二，對(duì)于用戶操作比較多的功能性網(wǎng)站，傳統(tǒng)的PC操作便利，不會(huì)給用戶帶來(lái)困擾。如果直接在手機(jī)上使用此類網(wǎng)站，縮小的功能按鈕和虛擬鍵盤給用戶操作帶來(lái)極大的不便，用戶體驗(yàn)大大降低。

第三，PC是通過(guò)有線網(wǎng)絡(luò)來(lái)訪問(wèn)網(wǎng)上資源的，其技術(shù)已經(jīng)十分成熟，不會(huì)受流量與速度的限制。為了追求更高的用戶體驗(yàn)，傳統(tǒng)PC頁(yè)面上會(huì)使用大量的網(wǎng)頁(yè)特效，再加上廣告等信息，頁(yè)面數(shù)據(jù)量一般都比較大。而智能手機(jī)則通過(guò)無(wú)線網(wǎng)絡(luò)來(lái)訪問(wèn)網(wǎng)上資源，并且智能手機(jī)終端的處理能力遠(yuǎn)不如PC，受到無(wú)線網(wǎng)絡(luò)和智能手機(jī)自身處理能力的限制，使用智能手機(jī)直接訪問(wèn)傳統(tǒng)PC網(wǎng)站，會(huì)出現(xiàn)下載速度慢和產(chǎn)生大量流量資費(fèi)等問(wèn)題。

在Web應(yīng)用得到廣泛應(yīng)用的今天，考慮到移動(dòng)互聯(lián)網(wǎng)的個(gè)性與特點(diǎn)，如何將傳統(tǒng)PC網(wǎng)站構(gòu)建為順應(yīng)移動(dòng)互聯(lián)網(wǎng)發(fā)展趨勢(shì)，適用于各種智能移動(dòng)終端的網(wǎng)站，成為了大家極為關(guān)注的焦點(diǎn)。

三、將傳統(tǒng)PC網(wǎng)站構(gòu)建為移動(dòng)版網(wǎng)站的方法

針對(duì)以上問(wèn)題，將傳統(tǒng)PC網(wǎng)站構(gòu)建為兼容各種智能終端的移動(dòng)版網(wǎng)站已是大勢(shì)所趨。目前，具體的實(shí)現(xiàn)方法主要有以下三種：

（一）頁(yè)面重建

該方法是在原有PC站點(diǎn)的基礎(chǔ)之上，通過(guò)組織團(tuán)隊(duì)或?qū)ふ臆浖_發(fā)公司，針對(duì)智能移動(dòng)終端的特點(diǎn)，開發(fā)移動(dòng)版網(wǎng)站，形成PC站點(diǎn)+移動(dòng)站點(diǎn)的結(jié)構(gòu)。用戶瀏覽網(wǎng)站時(shí)，根據(jù)自身使用的客戶端設(shè)備類型，來(lái)選擇對(duì)應(yīng)的網(wǎng)站版本。此方法可以根據(jù)不同的客戶端而量身定制滿足客戶需求的站點(diǎn)，可以最大程度的提高用戶體驗(yàn)，但這種方式存在開發(fā)成本和維護(hù)成本高等缺點(diǎn)。

（二）利用百度Site App工具

此方法借助第三方工具百度Site App，通過(guò)該工具快速將傳統(tǒng)PC網(wǎng)站構(gòu)建為移動(dòng)版網(wǎng)站。具體實(shí)現(xiàn)過(guò)程如下：

（1）通過(guò)輸入官方地址http：//siteapp.baidu.com,打開在線工具Site App，并在其中輸入想要構(gòu)建為手機(jī)網(wǎng)站的PC網(wǎng)站地址；

（2）選擇目標(biāo)網(wǎng)站的樣式；

（3）通過(guò)添加或者自動(dòng)抓取等方式，設(shè)置目標(biāo)網(wǎng)站的導(dǎo)航；

（4）根據(jù)需要，添加電話、郵箱、版權(quán)等相關(guān)組件；

（5）下載驗(yàn)證文件，上傳至網(wǎng)站根目錄進(jìn)行網(wǎng)站驗(yàn)證；

（6）綁定域名，配置dns即可。

Site App工具對(duì)于復(fù)雜腳本的處理能力有限，并且對(duì)網(wǎng)站交互功能的轉(zhuǎn)換效果比較差，因此它比較適合于構(gòu)建以文字閱讀為主的網(wǎng)站。

（三）響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)站也稱之為自適應(yīng)網(wǎng)站，它能夠兼容各種客戶終端。也就是說(shuō)，采用這種方法，只需開發(fā)一個(gè)網(wǎng)站，便可提供給所有的設(shè)備使用，無(wú)需考慮屏幕尺寸不一的問(wèn)題。將PC網(wǎng)站構(gòu)建為響應(yīng)式網(wǎng)站，既要保留其原有的PC端瀏覽效果，又要使其兼容不同類型的智能終端設(shè)備，所以只能在保持原有網(wǎng)站結(jié)構(gòu)的前提下，通過(guò)新建樣式表來(lái)滿足智能終端的瀏覽需求。具體實(shí)現(xiàn)過(guò)程如下：

（1）分析網(wǎng)站，刪減冗余內(nèi)容。根據(jù)移動(dòng)終端設(shè)備受網(wǎng)絡(luò)和屏幕尺寸限制的特點(diǎn)，其瀏覽的網(wǎng)頁(yè)應(yīng)是最精簡(jiǎn)的。這就要求我們對(duì)原有PC網(wǎng)站進(jìn)行分析，舍棄頁(yè)面中起修飾修飾作用，以及次要的內(nèi)容，保留頁(yè)面的核心內(nèi)容。

（2）編寫適合于移動(dòng)終端顯示的樣式表。精簡(jiǎn)網(wǎng)站的內(nèi)容之后，即可編寫適合移動(dòng)終端瀏覽的CSS樣式表。編寫時(shí)需注意兩個(gè)要點(diǎn)：其一，對(duì)于舍棄的內(nèi)容，可通過(guò)display：none屬性值對(duì)進(jìn)行設(shè)置，將其隱藏掉；其二，用于布局的div模塊，寬度都使用百分比進(jìn)行設(shè)置，實(shí)現(xiàn)自適應(yīng)寬度的流體布局。

（3）根據(jù)客戶端屏幕尺寸大小，自動(dòng)應(yīng)用樣式表。在網(wǎng)頁(yè)頁(yè)頭中的link標(biāo)簽，使用CSS3的media query設(shè)置功能，讓頁(yè)面能根據(jù)不同設(shè)備屏幕尺寸，自動(dòng)加載對(duì)應(yīng)的樣式表。

響應(yīng)式網(wǎng)站通過(guò)使用流體布局、媒體查詢等技術(shù)制作網(wǎng)頁(yè)，使得網(wǎng)頁(yè)能夠自適應(yīng)不同的終端設(shè)備。它是目前構(gòu)建兼容PC和智能移動(dòng)設(shè)備網(wǎng)站的最佳方案，也是Web設(shè)計(jì)的趨勢(shì)。

四、結(jié)束語(yǔ)

傳統(tǒng)PC網(wǎng)站是互聯(lián)網(wǎng)上的一大資源，智能手機(jī)的廣泛普及使得這一資源受到極大的挑戰(zhàn)。為避免造成這一資源的浪費(fèi)，以及減少企事業(yè)單位開發(fā)和維護(hù)網(wǎng)站的成本，研究如何將傳統(tǒng)PC網(wǎng)站構(gòu)建為適應(yīng)移動(dòng)互聯(lián)網(wǎng)技術(shù)發(fā)展需求的移動(dòng)版網(wǎng)站，具有重要意義。

[1]黃海玲.HTML5Web技術(shù)下的APP快速開發(fā)分析[J].無(wú)線互聯(lián)科技,2016(8):59-62.

[2]陳念.電子商務(wù)網(wǎng)站重構(gòu)策劃的策略研究——以用戶為中心的設(shè)計(jì)理念[J].中國(guó)商貿(mào),2012(15):103-104.