wordpress CMS主题 微信
Home > 网站建设 > JS判断是否手机浏览——实现跳转到手机适配网页

JS判断是否手机浏览——实现跳转到手机适配网页

高时银博客 网站建设 点击: 8,894 次 0 1
  • 标签:
  • 现在制作网页有一个非常流行的词——自适应,或者称它“响应式”,就是网页会根据屏幕的宽度来自动调整它的样式,而不让网页变形而惨不忍睹,这样,PC端和手机移动端都会有很好的观赏性。嗯,一般情况下,响应式网页比较适合一些比较简单布局结构不复杂的网站架构,如果一个网站结构比较复杂且网页布局比较丰富,响应式布局就比较难以应付了。

    这时,我们就可以把PC端和手机端分开来,各自以各自的网页布局来展示自己,像现在比较大型的网站都是这样做的,如:新浪、腾讯、搜狐等。而且,如果在手机端输入PC端域名,它会自动跳转到手机端域名,如:在手机浏览器输入 www.sohu.com  ,会自动跳转到 m.sohu.com 网站。怎样实现的呢?

    通过JS我们就可以实现这样的跳转功能。代码如下:

    //手机判断,如果是手机浏览,跳转到手机网站
    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://wap.fjmnw.com";
    }
    }catch(e){}
    }
    }

    通过上面的代码,我们就可以实现跳转到手机页的功能:如果在PC端,不会做出判断;如果是移动端浏览器,就会做出判断,如果是PC域名,就做跳转。

     


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201603125038.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论