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