代碼適配對百度友好代碼詳解
導讀簡介描述:移動端適配的方式有多種形式,比如通過規則適配、響應式、獨立移動PC站等方式都可以實現PC移動端適配的效果。今天詳細講一下本人比較喜歡的適配方式即代碼適配,這種適配方式可以說是盡可能的結合了上面集中適配方式的優點,對于SEO優化來說還是比較友好的。什么是代碼適配代碼適配PC和移動端使用了相同地址,通過服務器后端通過獲取用戶設備瀏覽器useragent參數,針對不同的設備加載不同的代碼即訪問界面;簡單的講就是不同設備上打開的頁面可以都不一樣,不僅僅是簡單的樣式不一樣,還可以控制html、js、css等代碼都不一樣,雖然響應式布局也是可以達到類似的效果。但是如果設備種類多的時候響應式布局的代碼冗余
個人/企業網站建設:698元,聯系電話:15093778828
更多網站建設 商城系統程序 定制程序開發需求請咨詢在線客服!
移動端適配的方式有多種形式,比如通過規則適配、響應式、獨立移動PC站等方式都可以實現PC移動端適配的效果。
今天詳細講一下本人比較喜歡的適配方式即代碼適配,這種適配方式可以說是盡可能的結合了上面集中適配方式的優點,對于SEO優化來說還是比較友好的。
什么是代碼適配代碼適配PC和移動端使用了相同地址,通過服務器后端通過獲取用戶設備瀏覽器useragent參數,針對不同的設備加載不同的代碼即訪問界面;
簡單的講就是不同設備上打開的頁面可以都不一樣,不僅僅是簡單的樣式不一樣,還可以控制html、js、css等代碼都不一樣,雖然響應式布局也是可以達到類似的效果。
但是如果設備種類多的時候響應式布局的代碼冗余會非常的高,十分的影響性能,并且擴展性能是遠遠不及代碼適配的。
什么樣的網站適合代碼適配代碼適配我們需要面對的問題就是后期維護的工作比較復雜,因為不同設備對應了不同的代碼及頁面模板文件,當對于網站需要調整的時候那么工作量會多出幾倍。
所以,這種適配方式還是比較適合網站結構比較簡單,頁面種類比較少的站點,比如企業站點、個人博客等。同時處于后期維護的復雜性,沒有一定的技術條件的站點是不建議使用這種適配方式。
如何實現代碼適配第一步就是確立服務器開啟了Vary:User-Agent,只有這樣用戶客戶端的任何請求信息中會包含UA的信息。
查看自己網站的http響應頭的方法有很多,Linux服務器端可以直接使用這個shell命令:curl–headhttp://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移動設備判斷區分完全的準確,包括搜索引擎有的時候在頁面種類的區分上也會出現錯誤的問題。
這個時候我們需要在上一個保險,那就是Metaapplicable-device標簽關鍵詞字,如果是PC端的模板文件,則在<head></head>之間添加<metaname="applicable-device"content="pc">;
如果是移動端的模板文件,則在<head></head>之間添加<metaname="applicable-device"content="mobile">;這種可以更加明確的告知搜索引擎當前頁面是PC還是移動,雙管齊下會更加的有保障。
個人/企業網站建設:698元,聯系電話:15093778828
更多網站建設 商城系統程序 定制程序開發需求請咨詢在線客服!
本文地址:jnbj1688.com/website/college/2377.html
如沒特殊注明,文章均為海鑫網絡原創
轉載請注明來自:jnbj1688.com