一:前述
上一篇 本网站手机版已经落成 只是说明了下大概的思路,并没有把步骤介绍给大家如何去做。今天就教大家如何去做电脑端跳转到手机端的实现方法。,因为开始的方法比较笨现在添加了第二种方法使用方法非常简单。
二:使用的两种方法(个人推荐用第二种,因为第一种是拼接方式,比较麻烦,需要根据自身的情况修改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、方法二
很多朋友都不懂如果跳转到手机端今天,在这里我添加动态生成你需要的域名方式,方式比原先要简单只需要替换而已。希望大家可以看看,有什么问题可以及时联系我。支持二级域名或二级目录。
三:结语
完成,这样就可以完成手机自动跳转功能了。
大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)