代碼適配對百度友好代碼詳解
導讀簡(jiǎn)介描述:移動(dòng)端適配的方式有多種形式,比如通過(guò)規則適配、響應式、獨立移動(dòng)PC站等方式都可以實(shí)現PC移動(dòng)端適配的效果。今天詳細講一下本人比較喜歡的適配方式即代碼適配,這種適配方式可以說(shuō)是盡可能的結合了上面集中適配方式的優(yōu)點(diǎn),對于SEO優(yōu)化來(lái)說(shuō)還是比較友好的。什么是代碼適配代碼適配PC和移動(dòng)端使用了相同地址,通過(guò)服務(wù)器后端通過(guò)獲取用戶(hù)設備瀏覽器useragent參數,針對不同的設備加載不同的代碼即訪(fǎng)問(wèn)界面;簡(jiǎn)單的講就是不同設備上打開(kāi)的頁(yè)面可以都不一樣,不僅僅是簡(jiǎn)單的樣式不一樣,還可以控制html、js、css等代碼都不一樣,雖然響應式布局也是可以達到類(lèi)似的效果。但是如果設備種類(lèi)多的時(shí)候響應式布局的代碼冗余
標簽: 海鑫網(wǎng)絡(luò ) 平頂山網(wǎng)站建設 代碼 頁(yè)面 pc 模板 適配 UA
個(gè)人/平頂山企業(yè)網(wǎng)站建設:698元,聯(lián)系電話(huà):15093778828
更多平頂山網(wǎng)站建設 平頂山商城系統程序 平頂山定制程序開(kāi)發(fā)需求請咨詢(xún)在線(xiàn)客服!
移動(dòng)端適配的方式有多種形式,比如通過(guò)規則適配、響應式、獨立移動(dòng)PC站等方式都可以實(shí)現PC移動(dòng)端適配的效果。
今天詳細講一下本人比較喜歡的適配方式即代碼適配,這種適配方式可以說(shuō)是盡可能的結合了上面集中適配方式的優(yōu)點(diǎn),對于SEO優(yōu)化來(lái)說(shuō)還是比較友好的。
什么是代碼適配代碼適配PC和移動(dòng)端使用了相同地址,通過(guò)服務(wù)器后端通過(guò)獲取用戶(hù)設備瀏覽器useragent參數,針對不同的設備加載不同的代碼即訪(fǎng)問(wèn)界面;
簡(jiǎn)單的講就是不同設備上打開(kāi)的頁(yè)面可以都不一樣,不僅僅是簡(jiǎn)單的樣式不一樣,還可以控制html、js、css等代碼都不一樣,雖然響應式布局也是可以達到類(lèi)似的效果。
但是如果設備種類(lèi)多的時(shí)候響應式布局的代碼冗余會(huì )非常的高,十分的影響性能,并且擴展性能是遠遠不及代碼適配的。
什么樣的網(wǎng)站適合代碼適配代碼適配我們需要面對的問(wèn)題就是后期維護的工作比較復雜,因為不同設備對應了不同的代碼及頁(yè)面模板文件,當對于網(wǎng)站需要調整的時(shí)候那么工作量會(huì )多出幾倍。
所以,這種適配方式還是比較適合網(wǎng)站結構比較簡(jiǎn)單,頁(yè)面種類(lèi)比較少的站點(diǎn),比如企業(yè)站點(diǎn)、個(gè)人博客等。同時(shí)處于后期維護的復雜性,沒(méi)有一定的技術(shù)條件的站點(diǎn)是不建議使用這種適配方式。
如何實(shí)現代碼適配第一步就是確立服務(wù)器開(kāi)啟了Vary:User-Agent,只有這樣用戶(hù)客戶(hù)端的任何請求信息中會(huì )包含UA的信息。
查看自己網(wǎng)站的http響應頭的方法有很多,Linux服務(wù)器端可以直接使用這個(gè)shell命令:curl–headhttp://www.xxxx.com/;Chrome瀏覽器自帶的抓包工具也可以查看;或者直接使用站長(cháng)平臺的抓取診斷工具就可以。
如果沒(méi)有開(kāi)啟Vary:User-Agent那么服務(wù)器/CDN/緩存會(huì )認為是相同的頁(yè)面,直接給用戶(hù)返回緩存的頁(yè)面,而不會(huì )再去web服務(wù)器請求相應的頁(yè)面。
$UA=strtoupper($_SERVER['HTTP_USER_AGENT']);if(preg_match("/(iPhone|iPad|iPod|Android)/i",$UA)){/*加載相應的模板文件*/}
第二部后端配置
這段代碼含義是,首先通過(guò)$UA=strtoupper($_SERVER['HTTP_USER_AGENT'])通過(guò)識別出用戶(hù)的user-agent,根據if條件判斷匹配不同的頁(yè)面模板,可以根據實(shí)際的應用需求去更改httpuser-agent關(guān)鍵字。
第三部正確性保障,在實(shí)際運用中用戶(hù)的設備是十分的復雜的,我們不能確保PC移動(dòng)設備判斷區分完全的準確,包括搜索引擎有的時(shí)候在頁(yè)面種類(lèi)的區分上也會(huì )出現錯誤的問(wèn)題。
這個(gè)時(shí)候我們需要在上一個(gè)保險,那就是Metaapplicable-device標簽關(guān)鍵詞字,如果是PC端的模板文件,則在<head></head>之間添加<metaname="applicable-device"content="pc">;
如果是移動(dòng)端的模板文件,則在<head></head>之間添加<metaname="applicable-device"content="mobile">;這種可以更加明確的告知搜索引擎當前頁(yè)面是PC還是移動(dòng),雙管齊下會(huì )更加的有保障。
個(gè)人/平頂山企業(yè)網(wǎng)站建設:698元,聯(lián)系電話(huà):15093778828
更多平頂山網(wǎng)站建設 平頂山商城系統程序 平頂山定制程序開(kāi)發(fā)需求請咨詢(xún)在線(xiàn)客服!
本文地址:www.lio1.com/websitepingdingshan/college/2377.html
如沒(méi)特殊注明,文章均為海鑫網(wǎng)絡(luò )原創(chuàng )
轉載請注明來(lái)自:www.lio1.com