代碼適配對百度友好代碼詳解

來源：飛飛網絡科技 2020-12-03

移動端適配的方式有多種形式，比如通過規(guī)則適配、響應式、獨立移動PC站等方式都可以實現PC移動端適配的效果。

今天詳細講一下本人比較喜歡的適配方式即代碼適配，這種適配方式可以說是盡可能的結合了上面集中適配方式的優(yōu)點，對于SEO優(yōu)化來說還是比較友好的。

什么是代碼適配

代碼適配PC和移動端使用了相同地址，通過服務器后端通過獲取用戶設備瀏覽器user agent參數，針對不同的設備加載不同的代碼即訪問界面；

簡單的講就是不同設備上打開的頁面可以都不一樣，不僅僅是簡單的樣式不一樣，還可以控制html、js、css等代碼都不一樣，雖然響應式布局也是可以達到類似的效果。

但是如果設備種類多的時候響應式布局的代碼冗余會非常的高，十分的影響性能，并且擴展性能是遠遠不及代碼適配的。

代碼適配我們需要面對的問題就是后期維護的工作比較復雜，因為不同設備對應了不同的代碼及頁面模板文件，當對于網站需要調整的時候那么工作量會多出幾倍。

所以，這種適配方式還是比較適合網站結構比較簡單，頁面種類比較少的站點，比如企業(yè)站點、個人博客等。同時處于后期維護的復雜性，沒有一定的技術條件的站點是不建議使用這種適配方式。

第一步就是確立服務器開啟了Vary:User-Agent，只有這樣用戶客戶端的任何請求信息中會包含UA的信息。

查看自己網站的http響應頭的方法有很多，Linux服務器端可以直接使用這個shell命令：curl –head http://www.xxxx.com/ ;Chrome 瀏覽器自帶的抓包工具也可以查看；或者直接使用站長平臺的抓取診斷工具就可以。

如果沒有開啟Vary:User-Agent那么服務器/CDN/緩存會認為是相同的頁面，直接給用戶返回緩存的頁面，而不會再去web服務器請求相應的頁面。


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

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

  /* 加載相應的模板文件 */

}

第二部后端配置

這段代碼含義是，首先通過$UA =strtoupper($_SERVER['HTTP_USER_AGENT'])通過識別出用戶的user-agent，根據if條件判斷匹配不同的頁面模板，可以根據實際的應用需求去更改httpuser-agent關鍵字。

第三部正確性保障，在實際運用中用戶的設備是十分的復雜的，我們不能確保PC移動設備判斷區(qū)分完全的準確，包括搜索引擎有的時候在頁面種類的區(qū)分上也會出現錯誤的問題。

這個時候我們需要在上一個保險，那就是Meta applicable-device 標簽關鍵詞字，如果是PC端的模板文件，則在<head></head> 之間添加<metaname="applicable-device"content="pc">；

如果是移動端的模板文件，則在<head></head> 之間添加<metaname="applicable-device"content=" mobile ">；這種可以更加明確的告知搜索引擎當前頁面是PC還是移動，雙管齊下會更加的有保障。