一、什么樣的網(wǎng)站適合做代碼適配?
代碼適配的特點是網(wǎng)站在移動化的過程中,使用了相同的網(wǎng)址作為移動適配的方法,根據(jù)服務器對用戶設備瀏覽器user agent參數(shù)的獲取,針對不同設備類型加載不同的訪問界面。也就是代碼適配成功之后,同一套網(wǎng)站url,在不同設備上打開的情況下可以是完全不同的頁面結(jié)構(gòu)和樣式(包括html和css)。
代碼適配的優(yōu)點:和自適應站點一樣,網(wǎng)頁版和移動版使用了同一套url規(guī)則,保持了網(wǎng)頁版的原有鏈接,SEO策略可以保持一致,也避免了站內(nèi)重復內(nèi)容的產(chǎn)生;相對于自適應網(wǎng)站設計前端性能會很高,因為是同一套代碼應對所有的設備顯示,需要加載針對響應式所需要的css,javascript,但是代碼適配的話可以簡化為只包含為相應設備優(yōu)化的內(nèi)容,以實現(xiàn)較少的前端性能損耗。
代碼適配的缺點:后期代碼維護很麻煩,要針對不同設備或不同分辨率屏幕設計相應的模板文件,內(nèi)容的部分雖然可以使用內(nèi)容管理系統(tǒng)在所有模板上自動同步更新內(nèi)容,但是根據(jù)網(wǎng)站的復雜程度,代碼適配所需的開發(fā)時間很有可能較長。
綜上所述,網(wǎng)站結(jié)構(gòu)簡單,網(wǎng)頁模板不是很多的站點比較適合做代碼適配,比如企業(yè)站,個人博客等。另外要注意的是,因為需要服務器端腳本來輔助實現(xiàn),所以您的網(wǎng)站必須在獨立服務器或VPS云主機上,虛擬主機用戶就不要進行代碼適配您的網(wǎng)站了。
二、如何實現(xiàn)代碼適配?
1.服務器端的準備工作
為什么要修改Vary HTTP頭?其實代碼適配應用的是HTTP的內(nèi)容協(xié)商機制,即服務器為同一個URL的請求提供了多份不同的文檔作為響應,服務端和客戶端之間會根據(jù)事先設定好的協(xié)商機制來選擇適合的版本。最常見的就是服務端根據(jù)客戶端發(fā)送的請求頭中包含某些字段自動發(fā)送最合適的版本。Vary的作用就在于告訴代理服務器、緩存或者CDN,如何判斷請求是否一樣,vary中的組合就是代理服務器、緩存或者CDN判斷的依據(jù),比如Vary中有 User-Agent(User-Agent:告訴HTTP服務器,客戶端使用的操作系統(tǒ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ù),即使同一個頁面請求,用戶使用IE打開,再用Firefox打開的時候,會被代理服務器/CDN/緩存認為是不同的請求,如果Vary中沒有User-Agent,那么代理服務器/CDN/緩存會認為是相同的頁面,直接給用戶返回緩存的頁面,而不會再去web服務器請求相應的頁面。總之服務器開啟了Vary:User-Agent之后,客戶端的任何請求信息中會包含UA的信息。同時官方說明它有助于百度spdier 更快速地發(fā)現(xiàn)針對移動設備進行優(yōu)化的內(nèi)容,并且提高其他ua抓取此網(wǎng)頁的優(yōu)先級。
2.如何修改服務器http頭
首先查看自己網(wǎng)站的http響應頭的方法有很多,Linux服務器端可以直接使用這個shell命令:curl –head http://www.xxxx.com/ ;Chrome 瀏覽器自帶的抓包工具也可以查看;或者直接使用站長平臺的抓取診斷工具就可以,下面就是查詢一個服務器響應的http頭的結(jié)果:
這個例子里目前的http頭信息中,Vary項現(xiàn)在是Accept-Encoding;而我們要修改的也就是這一項。具體修改http頭的方法根據(jù)不同的web服務器用不同的設置方法:
1) 如果web服務器是apache的話,第一步要確保服務器是否安裝了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 指令可以列出編譯過的模塊,同時能看到哪些模塊是static靜態(tài)編譯,哪一些是shared動態(tài)加載的。要往已經(jīng)編譯安裝好的apache添加mod_headers模塊,要在httpd的源文件里面找到mod_headers.c ,運行程序編譯出mod_headers.so ,然后在httpd.conf添加進來,參考步驟如下:
#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
保存更新,然后在要修改的目標站點的配置文件中,添加下面語句:
<IfModulemod_headers.c>
<FilesMatch".(js|css|xml|gz|html)$">
Header append Vary: User-Agent
</FilesMatch>
</IfModule>
保存之后,然后重啟apache就可以生效了。不需要對服務器進行重新編譯。
2)如果web服務器是nginx的話,第一步要確定安裝了ngx_headers_more模塊,nginx源碼沒有包含該模塊,需要另行添加。安裝方法:
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";
然后重啟服務器。
3) 如果是IIS
在web.config里加上如下配置,web.config位置在:%windir%\Microsoft.NET\Framework\.net版本號\CONFIG\Web.config 。<system.webServer>
<httpProtocol>
<customHeaders>
<remove name="Vary"></remove>
<add name="Vary" value="Accept-Encoding"></add>
</customHeaders>
</httpProtocol>
</system.webServer>
最后,同樣可以用上面方法再請求一次http頭,來判斷我們的設置有沒有成功。如果返回的頭中,有Vary:User-Agent 或者Vary:Accept-Encoding User-Agent 就表明我們設置成功了。
3.完成內(nèi)容協(xié)商
首先設計好針對不同設備的網(wǎng)站模板文件,可以和pc端相應的模板文件放在同一個路徑下,命名成不同的文件比如index.pc.htm index.iphone.htm index.andori.htm index.tv.htm等都是網(wǎng)站首頁在不同設備下的模板文件等待調(diào)用。
在這里簡單的僅以通過php代碼來實現(xiàn)的方式舉例,在url對應的動態(tài)文件中(可能是某個入口文件,也可能是通過入口文件include某控制文件),通過如下代碼實現(xiàn)動態(tài)適配:
$UA = strtoupper($_SERVER['HTTP_USER_AGENT']);
if(preg_match("/(iPhone|iPad|iPod|Android|ucweb|windowsphone|Blackberry)/i", $UA)) {
/* 加載相應的模板文件 */
}
這段代碼含義是,首先通過$UA =strtoupper($_SERVER['HTTP_USER_AGENT'])來獲取用戶 訪問的瀏覽器設備信息,通過匹配得到加載出不同設備系統(tǒng),瀏覽器下適配好的不同模板文件(以上匹配的UA只限iphone,ipad,ipod,android,uc移動瀏覽器,windows phone,黑莓手機等設備),如果大家想了解更多的httpuser-agent關鍵字,可自行去網(wǎng)上查找。
4.添加metaapplicable-device標簽
Vary標頭添加好后,服務器端就能根據(jù)請求頭中的UA信息,判斷客戶端是PC還是移動設備甚至是什么移動設備的請求了,有了這個服務器就能根據(jù)設定給出相應的響應文件,從而達到同一套url,不一樣的設備顯示不一樣的頁面樣式。為了讓百度更好地識別我們的頁面是 PC 還是 Mobile,就需要使用百度自定義的這個 Meta applicable-device 標簽。這個標簽可以幫助百度校驗自己的判斷,并及時進行修正。這部分是在網(wǎng)站的模板里添加的。如果是PC端的模板文件,則在<head></head> 之間添加<metaname="applicable-device"content="pc">;如果是移動端的模板文件,則在<head></head> 之間添加<metaname="applicable-device"content=" mobile ">;這樣即使通過服務器的設置BaiduSpider判斷錯誤了,這個標簽的設置也能起到修正的作用。
5.Firefox插件
之前站長學院文章<代碼適配移動站點對百度友好案例分享>中提到過Google 瀏覽器來模擬UA效果的插件,在此我再介紹一款火狐瀏覽器的UA模擬插件,它可以幫助各位站長輕松的”偽裝”成其他平臺/品牌的瀏覽器,來測試自己網(wǎng)站的適配結(jié)果
首先通過https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ 下載并安裝此插件,
完成后,點擊工具欄上的按鈕,打開UserAgent Switcher的菜單
選擇“EditUser Agent”或“UserAgent Switcher”=>"Options",打開如下的設置頁面。
點擊右下角的“Downloadlists of user agents to import...”鏈接,在打開的網(wǎng)頁中找到下圖中標注的位置,我們可以找到最常用的UA列表了,這里直接給出列表的下載地址,方便大家下載。
下載完成后,回到設置頁面,點擊左下方的“Import...”按鈕,將剛才下載的useragentswitcher.xml 導入到擴展中即可 ,之后我們就可以在瀏覽器上通過切換訪問剛剛適配好的頁面啦,之后補充一點我們?nèi)匀豢梢栽诂F(xiàn)有的UA基礎上“新建”(New)以及“修改”(Edit),來滿足我們的要求。
效果如下: