JavaScript判断PC与移动端访问及自动跳转实现

作者:函数茶馆

时间:2026-10-28

浏览:524

本文介绍如何利用JavaScript的Navigator对象获取User-Agent信息,通过正则表达式识别Android、iOS等移动设备。文章提供了完整的JS代码示例,演示如何根据设备类型自动重定向至移动端页面,旨在提升网站在不同终端上的兼容性与用户体验。

文章目录

项目背景与移动端优化需求

近期团队开发的“咖啡之翼”项目重点优化了移动平台体验。随着Android平台的快速发展,不仅推动了国内智能手机行业,也吸引了大量开发者投身移动终端开发。若错过其他互联网浪潮,绝不应再错过Android趋势。目前“咖啡之翼”已开发移动终端及安卓客户端,用户通过Android或iOS系统手机访问域名www.sygxy.cn即可查看移动端效果。Android客户端已上架腾讯“应用宝”和“百度手机助手”,搜索“咖啡之翼”即可下载。未进行推广的情况下,上架一周下载量已超100+。



优化移动终端的关键在于准确判断访问设备的类型。根据判断结果,系统可返回不同的域名地址,进而加载对应的CSS文件,以实现适配效果。



基于User-Agent的设备判断原理

判断方式主要依赖User-Agent值,通过JavaScript框架中Navigator对象的userAgent属性获取。尽管该对象未公开标准,但主流浏览器均支持。userAgent属性返回客户端发送给服务器的user-agent头部值,其中包含浏览器类型及操作系统信息。通过正则表达式匹配User-Agent值,并与本地预设的移动操作系统(如Android、iOS)或浏览器名称进行比对。若匹配成功则执行跳转,否则直接进入PC端首页。



JavaScript实现方案与优势

具体代码实现采用JavaScript脚本,以提升网站的可移植性。该技术优势主要体现在两方面:



第一,提升网站可移植性。若后续Web项目需增加移动端效果,团队可轻松引入此JS代码进行判断,从而提高开发效率。



第二,便于Web程序在不同界面灵活加载。是否引入移动端判断代码可根据具体页面需求决定。



具体实现方案如下:



我们将判断访问的脚本独立抽离。若某页面需进行客户端判断,只需在页面中使用<script></script>标签引入该脚本即可。具体判断逻辑见下方代码。


核心跳转代码实现

具体代码实现如下:

 
function uaredirect(f){
try{if(
document.getElementById("bdmark")!=null){
return
} 
var b=false;
if(arguments[1]){
var e=window.location.host;var a=window.location.href;
if(isSubdomain(arguments[1],e)==1){
f=f+"/#m/"+a;b=true}else{if(isSubdomain(arguments[1],e)==2){f=f+"/#m/"+a;b=true}
else{f=a;b=false}}}
else{b=true}if(b){var c=window.location.hash;
if(!c.match("fromapp")){
if((navigator.userAgent.match(/(iPhone|iPod|Android|ios|Windows Phone)/i))){location.replace(f)}}}}catch(d)<br> {<br> }<br>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章