代碼適配站點(diǎn)目前并非主流，但有其自己的特點(diǎn)和設(shè)計(jì)規(guī)范。學(xué)院邀請(qǐng)相關(guān)專(zhuān)家再次分享下如何建設(shè)對(duì)百度友好的代碼適配站點(diǎn)。

一、什么樣的網(wǎng)站適合做代碼適配？

代碼適配的特點(diǎn)是網(wǎng)站在移動(dòng)化的過(guò)程中，使用了相同的網(wǎng)址作為移動(dòng)適配的方法，根據(jù)服務(wù)器對(duì)用戶設(shè)備瀏覽器user agent參數(shù)的獲取，針對(duì)不同設(shè)備類(lèi)型加載不同的訪問(wèn)界面。也就是代碼適配成功之后，同一套網(wǎng)站url，在不同設(shè)備上打開(kāi)的情況下可以是完全不同的頁(yè)面結(jié)構(gòu)和樣式（包括html和css）。

代碼適配的優(yōu)點(diǎn)：和自適應(yīng)站點(diǎn)一樣，網(wǎng)頁(yè)版和移動(dòng)版使用了同一套url規(guī)則，保持了網(wǎng)頁(yè)版的原有鏈接，SEO策略可以保持一致，也避免了站內(nèi)重復(fù)內(nèi)容的產(chǎn)生；相對(duì)于自適應(yīng)網(wǎng)站設(shè)計(jì)前端性能會(huì)很高，因?yàn)槭峭惶状a應(yīng)對(duì)所有的設(shè)備顯示，需要加載針對(duì)響應(yīng)式所需要的css,javascript，但是代碼適配的話可以簡(jiǎn)化為只包含為相應(yīng)設(shè)備優(yōu)化的內(nèi)容，以實(shí)現(xiàn)較少的前端性能損耗。

代碼適配的缺點(diǎn)：后期代碼維護(hù)很麻煩，要針對(duì)不同設(shè)備或不同分辨率屏幕設(shè)計(jì)相應(yīng)的模板文件，內(nèi)容的部分雖然可以使用內(nèi)容管理系統(tǒng)在所有模板上自動(dòng)同步更新內(nèi)容，但是根據(jù)網(wǎng)站的復(fù)雜程度，代碼適配所需的開(kāi)發(fā)時(shí)間很有可能較長(zhǎng)。

綜上所述，網(wǎng)站結(jié)構(gòu)簡(jiǎn)單，網(wǎng)頁(yè)模板不是很多的站點(diǎn)比較適合做代碼適配，比如企業(yè)站，個(gè)人博客等。另外要注意的是，因?yàn)樾枰?wù)器端腳本來(lái)輔助實(shí)現(xiàn)，所以您的網(wǎng)站必須在獨(dú)立服務(wù)器或VPS云主機(jī)上，虛擬主機(jī)用戶就不要進(jìn)行代碼適配您的網(wǎng)站了。
 

二、如何實(shí)現(xiàn)代碼適配？

 1.服務(wù)器端的準(zhǔn)備工作

為什么要修改Vary HTTP頭？其實(shí)代碼適配應(yīng)用的是HTTP的內(nèi)容協(xié)商機(jī)制，即服務(wù)器為同一個(gè)URL的請(qǐng)求提供了多份不同的文檔作為響應(yīng)，服務(wù)端和客戶端之間會(huì)根據(jù)事先設(shè)定好的協(xié)商機(jī)制來(lái)選擇適合的版本。最常見(jiàn)的就是服務(wù)端根據(jù)客戶端發(fā)送的請(qǐng)求頭中包含某些字段自動(dòng)發(fā)送最合適的版本。Vary的作用就在于告訴代理服務(wù)器、緩存或者CDN，如何判斷請(qǐng)求是否一樣，vary中的組合就是代理服務(wù)器、緩存或者CDN判斷的依據(jù)，比如Vary中有 User-Agent（User-Agent：告訴HTTP服務(wù)器，客戶端使用的操作系統(tǒng)和瀏覽器的名稱(chēng)和版本。例 如： User-Agent: Mozilla/4.0 (compatible; MSIE8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)），那么User-Agent是否變化就是判斷的依據(jù)，即使同一個(gè)頁(yè)面請(qǐng)求，用戶使用IE打開(kāi)，再用Firefox打開(kāi)的時(shí)候，會(huì)被代理服務(wù)器/CDN/緩存認(rèn)為是不同的請(qǐng)求，如果Vary中沒(méi)有User-Agent，那么代理服務(wù)器/CDN/緩存會(huì)認(rèn)為是相同的頁(yè)面，直接給用戶返回緩存的頁(yè)面，而不會(huì)再去web服務(wù)器請(qǐng)求相應(yīng)的頁(yè)面。總之服務(wù)器開(kāi)啟了Vary:User-Agent之后，客戶端的任何請(qǐng)求信息中會(huì)包含UA的信息。同時(shí)官方說(shuō)明它有助于百度spdier 更快速地發(fā)現(xiàn)針對(duì)移動(dòng)設(shè)備進(jìn)行優(yōu)化的內(nèi)容，并且提高其他ua抓取此網(wǎng)頁(yè)的優(yōu)先級(jí)。

2.如何修改服務(wù)器http頭

首先查看自己網(wǎng)站的http響應(yīng)頭的方法有很多，Linux服務(wù)器端可以直接使用這個(gè)shell命令：curl –head http://www.xxxx.com/ ;Chrome 瀏覽器自帶的抓包工具也可以查看；或者直接使用站長(zhǎng)平臺(tái)的抓取診斷工具就可以，下面就是查詢一個(gè)服務(wù)器響應(yīng)的http頭的結(jié)果：

 

這個(gè)例子里目前的http頭信息中，Vary項(xiàng)現(xiàn)在是Accept-Encoding;而我們要修改的也就是這一項(xiàng)。具體修改http頭的方法根據(jù)不同的web服務(wù)器用不同的設(shè)置方法：

1）     如果web服務(wù)器是apache的話，第一步要確保服務(wù)器是否安裝了mod_headers模塊。如果是第一次編譯安裝apache，確保./configure--prefix=/usr/local/apache2 --enable-rewrite --enable-so --enable-headers--enable-expires --with-mpm=worker --enable-modules=most --enable-deflate等，后面有--enable-headers；如果apache已經(jīng)安裝編譯好了，httpd -M 指令可以列出編譯過(guò)的模塊，同時(shí)能看到哪些模塊是static靜態(tài)編譯，哪一些是shared動(dòng)態(tài)加載的。要往已經(jīng)編譯安裝好的apache添加mod_headers模塊，要在httpd的源文件里面找到mod_headers.c ,運(yùn)行程序編譯出mod_headers.so ,然后在httpd.conf添加進(jìn)來(lái)，參考步驟如下：

#cd /root/src/httpd-2.2.26/modules/mappers

#/usr/local/apache/bin/apxs-c mod_headers.c

#gcc-shared -o mod_headers.so mod_headers.o -lgdbm

#/usr/local/apache/bin/apxs-i -A -n mod_headers mod_headers.so

/usr/local/apache/bin/是正在使用的apahce的目錄

第二步，在httpd.conf 中添加headers_module模塊：

找到# LoadModule，在它的下一行插入：

LoadModule headers_module  modules/mod_headers.so

保存更新，然后在要修改的目標(biāo)站點(diǎn)的配置文件中，添加下面語(yǔ)句：

<IfModulemod_headers.c>

        <FilesMatch".(js|css|xml|gz|html)$">

          Header append Vary: User-Agent

        </FilesMatch>

</IfModule>

保存之后，然后重啟apache就可以生效了。不需要對(duì)服務(wù)器進(jìn)行重新編譯。
 

2）如果web服務(wù)器是nginx的話，第一步要確定安裝了ngx_headers_more模塊，nginx源碼沒(méi)有包含該模塊，需要另行添加。安裝方法：

wget ‘http://nginx.org/download/nginx-1.5.8.tar.gz’

tar –xzvf nginx-1.5.8.tar.gz

cd nginx-1.5.8/

#here we assume you would install you nginx under/opt/nginx/.

./configure –prefix=/opt/nginx \--add-module=/path/to/headers-more-nginx-module

make

make install

第二步，在配置文件nginx.conf中，添加如下代碼：

gzip_vary on;

more_set_headers -s 200 "Vary: ""Accept-Encoding, User-Agent";

然后重啟服務(wù)器。
 

3）  如果是IIS

在web.config里加上如下配置，web.config位置在：%windir%\Microsoft.NET\Framework\.net版本號(hào)\CONFIG\Web.config 。<system.webServer>
 <httpProtocol>
 <customHeaders>
<remove name="Vary"></remove>
<add name="Vary" value="Accept-Encoding"></add>
</customHeaders>
</httpProtocol>
</system.webServer>

最后，同樣可以用上面方法再請(qǐng)求一次http頭，來(lái)判斷我們的設(shè)置有沒(méi)有成功。如果返回的頭中，有Vary:User-Agent 或者Vary:Accept-Encoding User-Agent 就表明我們?cè)O(shè)置成功了。

3.完成內(nèi)容協(xié)商

首先設(shè)計(jì)好針對(duì)不同設(shè)備的網(wǎng)站模板文件，可以和pc端相應(yīng)的模板文件放在同一個(gè)路徑下，命名成不同的文件比如index.pc.htm index.iphone.htm index.andori.htm index.tv.htm等都是網(wǎng)站首頁(yè)在不同設(shè)備下的模板文件等待調(diào)用。

在這里簡(jiǎn)單的僅以通過(guò)php代碼來(lái)實(shí)現(xiàn)的方式舉例，在url對(duì)應(yīng)的動(dòng)態(tài)文件中(可能是某個(gè)入口文件，也可能是通過(guò)入口文件include某控制文件)，通過(guò)如下代碼實(shí)現(xiàn)動(dòng)態(tài)適配:

$UA = strtoupper($_SERVER['HTTP_USER_AGENT']);

if(preg_match("/(iPhone|iPad|iPod|Android|ucweb|windowsphone|Blackberry)/i", $UA)) {

  /* 加載相應(yīng)的模板文件 */

}

這段代碼含義是，首先通過(guò)$UA =strtoupper($_SERVER['HTTP_USER_AGENT'])來(lái)獲取用戶 訪問(wèn)的瀏覽器設(shè)備信息，通過(guò)匹配得到加載出不同設(shè)備系統(tǒng)，瀏覽器下適配好的不同模板文件(以上匹配的UA只限iphone,ipad,ipod,android,uc移動(dòng)瀏覽器，windows phone,黑莓手機(jī)等設(shè)備)，如果大家想了解更多的httpuser-agent關(guān)鍵字，可自行去網(wǎng)上查找。
 

4.添加metaapplicable-device標(biāo)簽

Vary標(biāo)頭添加好后，服務(wù)器端就能根據(jù)請(qǐng)求頭中的UA信息，判斷客戶端是PC還是移動(dòng)設(shè)備甚至是什么移動(dòng)設(shè)備的請(qǐng)求了，有了這個(gè)服務(wù)器就能根據(jù)設(shè)定給出相應(yīng)的響應(yīng)文件，從而達(dá)到同一套url，不一樣的設(shè)備顯示不一樣的頁(yè)面樣式。為了讓百度更好地識(shí)別我們的頁(yè)面是 PC 還是 Mobile，就需要使用百度自定義的這個(gè) Meta applicable-device 標(biāo)簽。這個(gè)標(biāo)簽可以幫助百度校驗(yàn)自己的判斷，并及時(shí)進(jìn)行修正。這部分是在網(wǎng)站的模板里添加的。如果是PC端的模板文件，則在<head></head> 之間添加<metaname="applicable-device"content="pc">；如果是移動(dòng)端的模板文件，則在<head></head> 之間添加<metaname="applicable-device"content=" mobile ">；這樣即使通過(guò)服務(wù)器的設(shè)置BaiduSpider判斷錯(cuò)誤了，這個(gè)標(biāo)簽的設(shè)置也能起到修正的作用。

5.Firefox插件

之前站長(zhǎng)學(xué)院文章<代碼適配移動(dòng)站點(diǎn)對(duì)百度友好案例分享>中提到過(guò)Google 瀏覽器來(lái)模擬UA效果的插件，在此我再介紹一款火狐瀏覽器的UA模擬插件，它可以幫助各位站長(zhǎng)輕松的”偽裝”成其他平臺(tái)/品牌的瀏覽器，來(lái)測(cè)試自己網(wǎng)站的適配結(jié)果

首先通過(guò)https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ 下載并安裝此插件，

完成后，點(diǎn)擊工具欄上的按鈕，打開(kāi)UserAgent Switcher的菜單

 

選擇“EditUser Agent”或“UserAgent Switcher”=>"Options"，打開(kāi)如下的設(shè)置頁(yè)面。

 

點(diǎn)擊右下角的“Downloadlists of user agents to import...”鏈接，在打開(kāi)的網(wǎng)頁(yè)中找到下圖中標(biāo)注的位置，我們可以找到最常用的UA列表了,這里直接給出列表的下載地址，方便大家下載。

 

下載完成后，回到設(shè)置頁(yè)面，點(diǎn)擊左下方的“Import...”按鈕，將剛才下載的useragentswitcher.xml 導(dǎo)入到擴(kuò)展中即可 ，之后我們就可以在瀏覽器上通過(guò)切換訪問(wèn)剛剛適配好的頁(yè)面啦，之后補(bǔ)充一點(diǎn)我們?nèi)匀豢梢栽诂F(xiàn)有的UA基礎(chǔ)上“新建”（New）以及“修改”（Edit），來(lái)滿足我們的要求。

效果如下: