网页前端设计

http://www.86y.org

搜索文章

js识别手机访问自动跳转到相应页面(2016-4-10更新)

用声音读出全文关注我吧
 2013/7/1 12:03:38 阅读次数:24148

一:前述

上一篇 本网站手机版已经落成 只是说明了下大概的思路,并没有把步骤介绍给大家如何去做。今天就教大家如何去做电脑端跳转到手机端的实现方法。,因为开始的方法比较笨现在添加了第二种方法使用方法非常简单。

二:使用的两种方法(个人推荐用第二种,因为第一种是拼接方式,比较麻烦,需要根据自身的情况修改JS代码。

1、方法一:

步骤一:首先要做的新建一个目录如(“M"),然后把主要想做成手机版的页面程序都统一做成都是只手机的界面。

当然这是准备工作也是非常重要的。还要特别注意的是手机显示效果宽度要用100%来定义的,没有电脑上那么宽屏。估且最好你先设置一个大小固定的效果在电脑上测试,测试完了就把宽度改成100%。因为手机的分辨率大小是不一样的。

步骤二:就是利用已有的现在的页面公用的JS文件添加这个功能的函数。

 

/*
* 智能机浏览器版本信息:
*
*/
  var browser={
    versions:function(){
           var u = navigator.userAgent, app = navigator.appVersion;
           return {//移动终端浏览器版本信息
                trident: u.indexOf("Trident") > -1, //IE内核
                presto: u.indexOf("Presto") > -1, //opera内核
                webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
                gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器
                iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf("iPad") > -1, //是否iPad
                webApp: u.indexOf("Safari") == -1 //是否web应该程序,没有头部与底部
            };
         }(),
         language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

/*
* 调用方法:mobT()//放到那些需要跳转的页面底部
*
*/
function mobT(){
    if(browser.versions.android || browser.versions.iPhone || browser.versions.ios){
        var tourl="";
        var url=document.location.href;
        var sarr=url.split("/");//将url地址按"/"分段主要是用来获取需要跳转的页面然后拼接
        if(sarr[3]!=null){
            if(sarr[3].indexOf("work")>-1 || sarr[3].indexOf("about")>-1 || sarr[3].indexOf("friend")>-1 || sarr[3].indexOf("photo")>-1);//判断这些页面是不需要跳转的,因为我添加的是模板,所以要判断。
            else if(sarr[3].indexOf("index")==0)
                tourl="m/";
            else       
                tourl="m/"+sarr[3];//拼接 以http://www.86y.org/art_detail.aspx?id=583为例,需要获取只是art_detail.aspx?id=583部分,所以手机页面是 m/art_detail.aspx?id=583。依此类推!
        }
        else
            tourl="m/index.aspx" //首页拼接
        window.location.href=tourl;
    }
}

2、方法二

很多朋友都不懂如果跳转到手机端今天,在这里我添加动态生成你需要的域名方式,方式比原先要简单只需要替换而已。希望大家可以看看,有什么问题可以及时联系我。支持二级域名或二级目录。

电脑端地址:例:(86y.org)

手机端地址:例:目录(86y.org/m)或二级域名(m.86y.org)

复制以下内容即可

	function mobT(){
   var sUserAgent = navigator.userAgent.toLowerCase();
   var tourl="";
   var url=document.location.href;
   var pcurl="86y.org";
   var moblieurl="86y.org/m";
   if ((sUserAgent.match(/(ipod|iphone os|midp|ucweb|android|windows ce|windows mobile)/i))) {
      //pc端转手机端
      if(url.indexOf(moblieurl)==-1)
      {
        tourl=url.replace(pcurl,moblieurl);
        window.location.href=tourl;
      }
   }
   else{
      //手机端转pc端
      if(url.indexOf("http://styhsoft.eicp.net:4658/test/m/")!=-1)
      {
        tourl=url.replace(moblieurl,pcurl);
        window.location.href=tourl;
      }
   }   
  }
  mobT();
  

三:结语

完成,这样就可以完成手机自动跳转功能了。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=583【js识别手机访问自动跳转到相应页面(2016-4-10更新)】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭