首页 >  帮助中心 > 教你打造自动识别PC端与移动端的响应式网站

教你打造自动识别PC端与移动端的响应式网站

来源:百度 点击量(109) 发布时间:2019-01-15

    随着移动端浏览量占比大幅提升,如何打造一个自动识别屏幕尺寸的自适应网站,就变成了站长不得不解决的一个现实问题。网站自动识别手机端的方法有很多,但是对于新手来说很是复杂,而且调试起来很困难。教你一个很简单的自动识别手机端并跳转的响应式网站。
   
    步骤一:进入百度开发者中心(http://siteapp.baidu.com/),利用siteapp来制作自己的手机网站,很简单,都是模板式建站,会打字就行。
   
    步骤二:绑定一个专属webapp域名,例如:m.mikuhost.com 域名的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.mikuhost.com";
               }else if(/iPad/i.test(navigator.userAgent)){
                   window.location.href="http://m.mikuhost.com";
               }else{
                   window.location.href="http://www.mikuhost.com"
               }
           }catch(e){}
       }
    }
    </script>
   
    这样就大功告成了,是不是很简单呢?

  • 服务热线   13291804285