尊敬的社員,您好!歡迎您來到麥布網,請[注冊]或[登錄]

首頁 | 同城網站 | 麥布網摘 | 網站目錄 | 程序源碼 | 站長導航 | 站長工具 | 自動鏈接 |

 
 
當前位置:麥布首頁 -> 站長網志 -> 查看日志
教你打造自動識別PC端與移動端的響應式網站

2016-9-19 21:38:00 | MyBu


    隨著移動端瀏覽量占比大幅提升,如何打造一個自動識別屏幕尺寸的自適應網站,就變成了站長不得不解決的一個現實問題。網站自動識別手機端的方法有很多,但是對于新手來說很是復雜,而且調試起來很困難。下面麥布就教你一個很簡單的自動識別手機端并跳轉的響應式網站。
   
    步驟一:進入百度開發者中心(http://siteapp.baidu.com/),利用siteapp來制作自己的手機網站,很簡單,都是模板式建站,會打字就行。
   
    步驟二:綁定一個專屬webapp域名,例如:m.54admin.net,將您已提交的WebApp域名的CNAME解析到siteapp.baidu.com
   
    步驟三:將自動識別手機端與PC端的代碼放置在你網站代碼的頂部位置。代碼如下:
    <script type="text/javascript">
    if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
    if(window.location.href.indexOf("?mobile")<0){
    try{
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
    window.location.href="http://m.54admin.net";
    }else if(/iPad/i.test(navigator.userAgent)){
    window.location.href="http://m.54admin.net";
    }else{
    window.location.href="http://www.54admin.net"
    }
    }catch(e){}
    }
    }
    </script>
   
    這樣就大功告成了,是不是很簡單呢?
   
    歡迎關注麥布(微信/QQ號:330419081),一起分享站長資源,探討網站運營推廣之道!



發表評論:歡迎對該文章發表你的看法。


還沒有任何評論

 共計 0 條評論 | 共: 頁 | 當前: 第 頁 當前只有一頁
 

    記錄麥布網站的發展歷程及使用技巧,請隨時關注黑板報!

::日志分類::

告示·網站的大小事務
手記·建站的心得體會
品網·品嘗互聯網之美
碎語·閑話互聯網之外


 
 

關于麥布 | 用戶幫助 | 廣告服務 | 新站登錄 | 網站地圖 | 站長博客 | 聯系我們
Copyright © 麥布站長網 Inc. 浙ICP備11061744號-2  基于阿里云服務器

全网最准一尾中特平