js实现PC版网页自动识别手机客户端并跳转

PC版网页自动识别手机客户端并跳转,用js进行判断是否手机客户端进行跳转最好,特别是静态网页,把这个过程通过js的方式放在用户客户端执行,可以大大减少服务器端额外处理的压力。但是有时需要通过在服务器端进行判断的情况除外。

以腾讯网适配js函数为例:

<script>
(function(){
/*
  腾讯网适配跳转
*/
var reWriteUrl = function(url){
 if(url){
if(url.indexOf("/a/")>0 ){
 var Splits = url.split("/"),siteName=Splits[2].split("qq.com")[0].split(".").length==3?siteName=Splits[2].split("qq.com")[0].split(".")[0]+"_"+Splits[2].split("qq.com")[0].split(".")[1]:siteName=Splits[2].split("qq.com")[0].split(".")[0],aids=url.split("/a/")[1].split(".htm")[0].replace(/[^0-9]/g, ""),site="";
 if(typeof siteName!=="undefined" && typeof aids!=="undefined"){
if(siteName.split(".").length>2){
 var len = siteName.split(".").length;
 for(var i=0;i<len;i++){
 site+=siteName.split(".")[i];
 if(i<len-2){
site+="_";
 }
 }
}else{
 site=siteName.split(".")[0];
}
return "http://xw.qq.com/"+siteName+"/"+aids;
 }
}
 }
};
var goToMobile = function(){
var Aarry = document.getElementsByTagName("a"),TmpArray=[];
for(var i=0;i<Aarry.length;i++){
 TmpArray[i]=Aarry[i].href.toString();
 if(TmpArray[i].split("/")[3]=="a"){
Aarry[i].href=reWriteUrl(TmpArray[i]);
 }
}

}
var mobileSietList={news:"news",photo:"photo",video:"video",view:"huati",finance:"finance",ent:"ent",sports:"sports",digi:"digi",mil:"mil",lady:"lady",auto:"auto",games:"games",house:"house",astro:"astro",cul:"cul",fashion:"fashion","2014":"shijiebei"};

if(/Android|webOS|iPhone|Windows Phone|iPod|BlackBerry|SymbianOS/i.test(navigator.userAgent)){
 /*底层页跳转*/
 var url=window.location.href;
 var pathname=window.location.pathname;
 if(url.indexOf("/a/")>0 && window.location.hostname!="www.nanjing2014.org"){
if(url.indexOf("?pc")<0){
try{
 window.location.href=reWriteUrl(url);
}catch(e){}
}
 }else{ // 频道首页跳转
if(url.indexOf("?mobile")<0){
 var mobileUrl=window.location.hostname.split(".")[0];
 if(/news|pp|video|view|finance|ent|sports|digi|mil|fashion|auto|games|house|astro|cul|2014/i.test(mobileUrl)){
try{
 window.location.href='http://xw.qq.com/m/'+mobileSietList[mobileUrl]+'/index.htm';
}catch(e){ 
}
 }
}
 }
 try{
//document.addEventListener('DOMContentLoaded', goToMobile, false);
 }catch(e){ 
 }
}
})();
 
</script>

以上函数取自腾讯网的js适配跳转,可以参考它的逻辑根据自己网站的情况实现这个过程。

时间: 2024-08-04 14:30:09

js实现PC版网页自动识别手机客户端并跳转的相关文章

PC版与Android手机版带断点续传的多线程下载_Android

一.多线程下载         多线程下载就是抢占服务器资源         原理:服务器CPU 分配给每条线程的时间片相同,服务器带宽平均分配给每条线程,所以客户端开启的线程越多,就能抢占到更多的服务器资源.       1.设置开启线程数,发送http请求到下载地址,获取下载文件的总长度           然后创建一个长度一致的临时文件,避免下载到一半存储空间不够了,并计算每个线程下载多少数据              2.计算每个线程下载数据的开始和结束位置           再次发送

PC版与Android手机版带断点续传的多线程下载

一.多线程下载 多线程下载就是抢占服务器资源 原理:服务器CPU 分配给每条线程的时间片相同,服务器带宽平均分配给每条线程,所以客户端开启的线程越多,就能抢占到更多的服务器资源. 1.设置开启线程数,发送http请求到下载地址,获取下载文件的总长度           然后创建一个长度一致的临时文件,避免下载到一半存储空间不够了,并计算每个线程下载多少数据              2.计算每个线程下载数据的开始和结束位置           再次发送请求,用 Range 头请求开始位置和结束位

中国式网页设计:手机客户端和网页版合二为一

文章描述: 采用流式页面,手机客户端的编辑力量和网页版合二为一,一次推送,自动铺开到所有终端,大家在不同地方看到的都是一样的新闻列表,编辑力量将被空前地解放. [核心提示] 采用流式页面,手机客户端的编辑力量和网页版合二为一,一次推送,自动铺开到所有终端,大家在不同地方看到的都是一样的新闻列表,编辑力量将被空前地解放. 无限滚动,类似博客页面的版式终于开始替代所谓"新浪模式"的拥挤不堪的版面,成为传统门户网站的选择. 2012 年 7 月,腾讯科技改版成为博客版式,引发热烈讨论.随后,

开心网手机客户端发布2.3版 促进用户间更多互动

移动互联网时代,国内外各大社交网站正纷纷发力移动终端应用,通过不断升级自己的移动客户端来抢占移动市场.日前,加入更多新功能.突出好友互动的开心网Android客户端2.3版正式发布.同时,增加更多趣味性功能的IOS2.3版客户端也已提交App Store进行审核. (Android系统的开心网手机客户端2.3版) 在Android系统的开心网客户端2.3版中,全新的内容发布方式成为引人关注的的亮点.此外,聊天页面也进行了大幅度改版,更为照顾手机用户的操作习惯.好友动态页面还可直接进行评论.转发.

米聊pc版使用指南

围观米聊独特的自定义"更衣"方式 米聊PC版的安装简单,下一步策略就可以安装完毕.它的登陆界面也显得比较的中规中矩,主要由设置按钮.帐号密码输入框.记住密码自动登陆选项.登陆按钮及注册按钮所组成,没有即时聊天软件常见的登陆状态选择功能. 图1 登陆界面 需要注意的是,目前米聊PC版尚处于内测阶段,需要邀请码绑定激活码后才能使用.邀请码可以到米聊的官方微博碰碰运气. 米聊PC版的主界面还是保持简单风格,主要由用户头像.用户名.状态切换按钮.个性化签名.功能分类选项卡.联系人列表.功能按钮

家有购物正式推出手机客户端,正式进军电商领域

2013年4月,国内领先的家庭购物企业家有购物正式推出了安卓版和苹果版手机客户端,标志着家有购物全面进军移动电子商务领域.零售业分析师表示,中国的电视购物行业与电子商务行业是同步成长起来的,这跟国外有很大不同,所以电视购物在发展过程中也在吸收电子商务的经验,加上广电总局对购物频道的扶持,国内电视购物行业已经有了质的发展,但在移动电子商务领域,现在谁也不敢说自己握有"坐票". 家有购物有意加快进军移动电子商务步伐 据了解,家有购物目前已经拥有电视频道.网上商城.商品目录等多种购物渠道,推

请教各位达人一个问题 如何使用jQuery Mobile让pc网页自适应手机屏幕

问题描述 请教各位达人一个问题 如何使用jQuery Mobile让pc网页自适应手机屏幕 请教各位达人一个问题 如何使用jQuery Mobile让pc网页自适应手机屏幕 解决方案 http://skyonsea.com/html-width%E8%87%AA%E5%8A%A8%E9%80%82%E5%BA%94%E6%89%8B%E6%9C%BA%E5%B1%8F%E5%B9%95%E5%A4%A7%E5%B0%8F/ 这个网页是关于使用jQuery Mobile让PC网页自适应手机屏幕的文

米聊PC版怎么样 米聊PC客户端使用评测

在收购了MSNLite团队后,小米公司于本月初发起了米聊PC版内测.今天,米聊PC版公开测试(版本号为1.0.0.5009),所有用户都可以下载体验米聊的PC客户端. 米聊PC版有三大特色:轻快.简洁.纯粹,支持Windows XP.Vista.Windows 7系统. 此前在内测阶段我们PC6也对米聊进行了试用,米聊的功能比较简单,也没有什么特色功能,只是方便了用户在PC上与手机米聊好友的联系.不过,在QQ/微信垄断即时聊天的大环境下,多一个竞争对手总是好事情. 值得注意的是米聊PC客户端的安

网页制作-手机显示电脑版网页错位,截图说明,跪请技术支持~

问题描述 手机显示电脑版网页错位,截图说明,跪请技术支持~ 不好意思问个问题 ,找了2天了,我实在是找出来问题出在哪里,百度也查了,就是pc版到手机端的显示不正常,手机端显示的也是电脑版,非响应试和专门的手机站. 1.html标签显示为980px,然后 头部 图片和底部通栏 撑不出来,并且不能居中,正常版心为1140: 2.中间能撑出来,不过也不能居中: 手机显示电脑版错位:pc端 显示正常 解决方案 http://bbs.csdn.net/topics/391914801 解决方案二: 楼主已