NoteZ_技术博客 NoteZ_技术博客
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)

NoteZ_技术博客

前端界的小学生
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)
  • JavaScript笔记

    • ajax如何解决跨域问题
    • async与await语法
    • Axios 文件下载实现进度条功能
    • Axios 的各种请求方式及传参格式总结
    • axios简单使用
    • CommonJS与ES6 Module的导入与导出之间的区别
    • ES6 中 export,export default 和 import 区别及用法
    • Javascript - 如何循环遍历getElementsByClassName返回的所有DOM元素
    • JavaScript 实现 charts 缩放比例尺
    • javaScript 实现将文件流下载文件保存到本地
    • JavaScript 数组对象去重方法
    • JavaScript 生成 uuid
    • JavaScript 解析 get 请求 url 参成对象
    • JavaScript判断字符串中是否包含某个字符串
    • JavaScript判断是否为移动端浏览器
    • JavaScript复制内容到剪贴板的两种常用方法
    • JavaScript实现单词首字母大写的方法总汇
    • JavaScript对时间(time)、日期(date)格式转换
    • JavaScript数组去重方法总结
    • JavaScript数组类型(Array)操作方法汇总
    • JavaScript浅度和深度复制的实现方法
    • js 中的 ES5 面向对象
    • js 中的 ES6 面向对象
    • js 中的 new 命令原理
    • js 实现 iframe通信
    • js 实现将文本复制到粘贴板
    • js 异步操作
    • js 数组转为树形(tree)结构
    • js 文件分片上传
    • js 统计数组中元素的重复次数
    • JS 选中文本输入框的部分文本内容
    • js 面向对象总结
    • Js中的forEach()、map()、$.each()和$.map()之间异同
    • js中的多种数组去重性能对比总结
    • js判断移动端还是pc端
      • js判断移动端还是pc端
      • 其他拓展:
    • JS如何监听div的resize事件
    • js实现格式化JSON数据方法
    • js实现防抖与节流函数
    • Js将滚动条(scrollbar)保持在最底部的方法
    • JS异步编程进化之路
    • JS数组改变元素位置(互换、置顶、上移、下移)
    • js数组的简单使用
    • js文件单位大小转换
    • JS获取和修改url参数
    • JS获取浏览器信息
    • js获取浏览器可视区或页面大小的兼容性总结
    • JS读取本地文本文件(兼容各种浏览器)
    • js随机打乱数组
    • Promise 中的 async 与 await 特点
    • Promise封装请求
    • qs.stringify 的基本用法
    • Web worker 使用方法
    • window.open之浏览器新窗口打开
    • 使用 js 实现保存 .tree 文件到本地
    • 使用 JS 将数字转化成千分位
    • 使用 js 快速计算文件 hash 值
    • 使用 js 进行Base64编码、解码(js-base64)
    • 使用 setTimeout 解决 setInterval 计时器不准的问题
    • 使用js在树形(tree)结构中找到子节点的父级路径
    • 使用JS如何判断远程网络图片地址是否失效
    • 使用js操作浏览器cookie的设置,读取,删除
    • 使用JS解决PC端页面适配方案
    • 使用js递归生成树形结构
    • 使用原生js(input type = file)上传图片(Base64)限制大小、类型判断、像素判断
    • 关于JavaScript 数组的复制解析总结
    • 关于JavaScript数组方法使用总结
    • 内置对象
    • 前端 DOM 总结
    • 前端 js 基础总结
    • 前端使用 jszip 解压 .zip 文件获取 file 格式文件
    • 前端各种事件总结
    • 前端常用的JS(代码片段)小工具方法总结
    • 前端登录界面常用的JS小工具方法总结
    • 十六(16)进制与rgb颜色转换
    • 原生 JavaScript 实现 div 随意拖拽原生 JavaScript 实现 div 随意拖拽
    • 原生 JS 实现页面树形(tree)菜单展示功能
    • 原生js实现 table表格列宽拖拽
    • 原生js获取iframe中dom元素或父级元素
    • 如何使用 file-saver 导出文件到本地?
    • 如何使用js将目录路径list转成tree树结构
    • 实现对localStorage、sessionStorage高级封装
    • 将一维数组按指定长度转为二维数组
    • 将网站设为主页以及加入收藏功能实现方法
    • 总结 3 种 HTML 转 PDF 导出的方案
    • 比typeof运算符更准确的js类型判断
    • 浏览器模型
    • 监听滚动条事件-返回顶部的方法
    • 简析JavaScript中的事件委托问题
    • 返回顶部的通用Js方法
    • 非常实用的Js代码工具片段
    • JS_根据鼠标位置缩放元素、拖拽
    • js_登录验证码绘制
    • JS-以鼠标位置为中心的滑轮缩放-图片
    • js生成目录并实现目录节点跟随滚动高亮
    • 使用js实现标题跳转与复制实现方法
    • 使用原生js动态实现文件的上传功能
    • 使用原生js提取md中的图片信息
    • 3d-force-graph使用方法
    • js 前端(web)浏览器端读取文件目录
    • 原生js监听窗口大小变化
    • JS 中 Promise 用法(简要总结)
  • CSS笔记

  • HTML笔记

  • Canvas笔记

  • Nuxt笔记

  • React笔记

  • Vue笔记

  • TypeScript笔记

  • AI相关笔记

  • 开发文档
  • JavaScript笔记
NoteZ
2022-11-18
目录
js判断移动端还是pc端
其他拓展:

js判断移动端还是pc端

# js判断移动端还是pc端

function isMobile() {
    let userAgentInfo = navigator.userAgent;
    let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
    let getArr = Agents.filter(i => userAgentInfo.includes(i));
    return getArr.length ? true : false;
  }
1
2
3
4
5
6

判断是否是pc端

  • true: 移动端
  • false: pc端

其他方案:

方案一:

var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
    isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
    isAndroid = ua.match(/(Android)\s+([\d.]+)/),
    isMobile = isIphone || isAndroid;
    if(isMobile) {
        location.href = 'http://m.baidu.com';
    }else{
        location.href = 'http://www.baidu.com';
    }
    return;
    //或者单独判断iphone或android
    if(isIphone){
        console.log("iphone访问");
        //code
    }else if(isAndroid){
        console.log("Android访问");
        //code
    }else{
        console.log("非iphone或Android访问");
        //code
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

方案二:

function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        //跳转移动端页面
    } else {
        //跳转pc端页面
    }
}
browserRedirect(); 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方案三:

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.*/), //是否为移动终端  
                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 , //是否为iPhone或者QQHD浏览器  
                iPad: u.indexOf('iPad') > -1, //是否iPad    
                webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部  
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信   
                qq: u.match(/\sQQ/i) == " qq" //是否QQ  
            };  
         }(),  
         language:(navigator.browserLanguage || navigator.language).toLowerCase()  
}   

  if(browser.versions.mobile || browser.versions.ios || browser.versions.android ||   
    browser.versions.iPhone || browser.versions.iPad){   
        //web端打开    
        window.location = "http://m.zhaizhainv.com";      
  }else if(browser.versions.weixin){
         //微信打开
  }else{
        //PC端打开
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

方案四:

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "https://www.baidu.com/";
    //手机端
} else {
    window.location.href = "http://news.baidu.com/";
}

1
2
3
4
5
6
7

# 其他拓展:

智能机浏览器版本信息:

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.indexOf('iPad') > -1, //是否为移动终端
      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, //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
    };
  }(),
  language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
  
    document.writeln("语言版本: "+browser.language+"<br/>");
    document.writeln("是否为移动终端: "+browser.versions.mobile+"<br/>");
    document.writeln("ios终端: "+browser.versions.ios+"<br/>");
    document.writeln("android终端: "+browser.versions.android+"<br/>");
    document.writeln("是否为iPhone: "+browser.versions.iPhone+"<br/>");
    document.writeln("是否iPad: "+browser.versions.iPad+"<br/>");
    document.writeln(navigator.userAgent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

是否是ipad:

function isIpad(){
    var ua = navigator.userAgent.toLowerCase();
    if(/ipad/i.test(ua))
    {
        return true;
    }
    else{
        return false;
    }
}

1
2
3
4
5
6
7
8
9
10
11

判断浏览器是否为IE8以下

var DEFAULT_VERSION = 8.0;
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf("msie")>-1;
var safariVersion;
if(isIE){
    safariVersion =  ua.match(/msie ([\d.]+)/)[1];
}
if(safariVersion < DEFAULT_VERSION ){
      // 进行你所要的操作
    alert("系统检测到您正在使用ie8以下内核的浏览器,为了更好的体验,请及时更新浏览器版本或采用浏览器极速模式浏览网页!")
};

1
2
3
4
5
6
7
8
9
10
11
12

是否为IE

function isIE() { //ie?
     if (!!window.ActiveXObject || "ActiveXObject" in window){
             alert("我是货真价实的IE浏览器!");
             return true; 
             }else{
                 alert("我不是IE!");
                 return false; 
            }
 }
isIE();

1
2
3
4
5
6
7
8
9
10
11
#JavaScript
上次更新: 2024/01/30, 00:35:17
js中的多种数组去重性能对比总结
JS如何监听div的resize事件

← js中的多种数组去重性能对比总结 JS如何监听div的resize事件→

最近更新
01
Gitea数据备份与还原
03-10
02
Linux 中使用 rsync 同步文件目录教程
03-10
03
Linux 使用 rsync 互相传输同步文件的简单步骤
03-08
更多文章>
Theme by Vdoing | Copyright © 2019-2025 NoteZ,All rights reserved | 冀ICP备2021027292号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式