A-A+

PHP判断网站是否手机版进行跳转

2015年05月22日 PHP技术文章 评论 27 条 阅读 180 views 次

最近在搞手机的微官网,这里小小的说明一下,其实微官网就是将手机版的网站在微信里面做了一个“微官网”的链接,可以使其在微信公众号里面打开,这样就形成了微官网,也就是我们只要制作一个手机版的网站,然后再申请一个微信公众号,在里面就可以进行链接这个手机版的网站,这样我们就有了手机版网站+微官网了,呵呵,夏日博客在制作了电脑版和手机版两个版本的站点时,需要进行客户端的判断,也就是如果是电脑打开,则显示电脑版网站,如果是手机客户端打开则显示手机版的网站。

实现这样的要求其实不难,网上的跳转代码很多,就是作了一个 js 的判断,首先判断客户端是手机还是电脑,然后作相应的跳转,下面是一段JS的跳转代码:

  1. <script>  
  2.     var pc_style = ""  
  3.     var browser = {  
  4.     versions: function () {  
  5.     var u = navigator.userAgent, app = navigator.appVersion;  
  6.     return {  
  7.     trident: u.indexOf('Trident') > -1,  
  8.     presto: u.indexOf('Presto') > -1,  
  9.     webKit: u.indexOf('AppleWebKit') > -1,  
  10.     gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,  
  11.     mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('Chrome') < 0,  
  12.     ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),  
  13.     android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,  
  14.     iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,  
  15.     iPad: u.indexOf('iPad') > -1,  
  16.     webApp: u.indexOf('Safari') == -1,  
  17.     ua: u  
  18.     };  
  19.     }(),  
  20.     language: (navigator.browserLanguage || navigator.language).toLowerCase()  
  21.     }  
  22.   
  23.     if (browser.versions.mobile && !browser.versions.iPad) {  
  24.     this.location = "https://www.xiariboke.net/";  
  25.     /*微官网地址*/  
  26.     }  
  27. </script>  

将这段代码放到网站 head 代码之间就可以了,在用手机浏览的时候会自动跳转到“微官网地址”,也就是手机版的地址了。

题外话:话说现在的自适应设计已经很流行了,最好在设计站点的时候使用自适应的页面,但这种技术要求较高,如果做不了自适应效果,就只能制作两个版本的站点来进行判断跳转了。

标签:

27 条留言  访客:27 条  博主:0 条

  1. 天中青年

    博主最近不怎么更新了

    • smiling

      去旅游去了,刚回来。

  2. 天中青年

    虽然看不懂代码,但是为博主的威武赞一个。

  3. 吾爱实惠网

    做两站的话挺好用

  4. 27joy.cn耕耘网

    自适应网站,本身在pc,手机浏览器,微信浏览器里面都能很好的显示,整体上给人一体化的感觉

  5. JACK的机器人

    手机判断结合分辨率判断,这好像是鸟哥主题的判断依据,呵呵

    • smiling

      鸟哥的主题是自适应的,这段代码是当一个是PC版,一个手机版的时候用的,也就是两个网站的时候用的。

  6. 敲不死

    很有技术的一篇文章 不错

  7. 三秒兔

    很有用,收藏了。

  8. 爱的表白

    感谢分享~!

  9. 微商

    你 也换成鸟哥的模板了 😳

    • smiling

      嗯,之前的主题也不错,只是不支持自适应。

  10. 如何减压

    挺厉害的啊,我有点看不懂

  11. an9

    技术文,不懂,纯支持了。 😆

  12. 我爱书籍

    呵呵 又用回鸟哥的主题了

    • smiling

      主要是自适应的主题,而且版面也很清新。

  13. 陈宝文

    支持博主,看来博主也是一个挺能坚持的人。

    • smiling

      坚持吧,总不能让博客就这样荒废着。

  14. BOKE123

    响应式主题比较好,不过像本站是导航站,做成响应式就感觉很不协调,所以还是有一个独立的手机版比较好。

    • smiling

      最好是响应式的主题,现在手机用户是越来越多了。

  15. 老何

    传说中的自适应吗

    • smiling

      这是跳转的代码,能做成自适应是最好的。

  16. 中国历史

    关于跳转,最近很郁闷,用pc访问新浪微博,一直是wap版,有办法换到pc版没

    • smiling

      新浪微博是新浪官方的产品,这个咱们可操作不了。

  17. 微部落博客大全

    越来越专业了,希望分享个打造WP网站APP的操作办法

    • smiling

      感觉没必要了,直接搞出个自适应的主题不更省劲麽。

  18. 正红博客

    越来越厉害了啊,还是以前弄了个公众号,不知道怎么操作。现在应该是收回去了吧。感觉不推广粉丝就不会来,有难度就没弄了。

给我留言