iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >vue开发中不同浏览器的类型判断方式是什么
  • 457
分享到

vue开发中不同浏览器的类型判断方式是什么

2023-06-29 16:06:56 457人浏览 八月长安
摘要

这篇文章将为大家详细讲解有关Vue开发中不同浏览器的类型判断方式是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、通过navigator.userAgent来进行浏览器类型判断定义和用法userAg

这篇文章将为大家详细讲解有关Vue开发中不同浏览器的类型判断方式是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

    一、通过navigator.userAgent来进行浏览器类型判断

    定义和用法

    userAgent 属性是一个只读的字符串,声明了浏览器用于 Http 请求的用户代理头的值。

    一般来讲,它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。

    例如:Mozilla/4.0 (compatible; MSIE 6.0; windows NT 5.2; SV1; .net CLR 1.1.4322)。

    注:用户代理头:user-agent header。

    语法

    navigator.userAgent

    navigator.userAgent使用场景

    判断是Android或者iOS
    function getOSType() {  if (/(Android)/i.test(navigator.userAgent)) {    return 'Android'  } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {    return 'iOS'  }}
    判断是否是微信浏览器
    function is_weixin(){  if (/(micromessenger)/i.test(navigator.userAgent)) {    return true  } else {    return false  }}
    判断是否是QQ浏览器
    function is_qq(){  if (/(MQQBrowser)/i.test(navigator.userAgent)) {    return true  } else {    return false  }}
    判断是手机端、平板还是PC
    var os = function (){    var ua = navigator.userAgent,    isWindowsPhone = /(?:Windows Phone)/.test(ua),    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,    isAndroid = /(?:Android)/.test(ua),    isFireFox = /(?:Firefox)/.test(ua),    isChrome = /(?:Chrome|CriOS)/.test(ua),    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),    isPhone = /(?:iPhone)/.test(ua) && !isTablet,    isPc = !isPhone && !isAndroid && !isSymbian;    return {        isTablet: isTablet,        isPhone: isPhone,        isAndroid: isAndroid,        isPc: isPc    };}(); if (os.isAndroid || os.isPhone) {  console.log("手机")} else if (os.isTablet) {  console.log("平板")} else if(os.isPc) {  console.log("电脑")}

    navigator.userAgent格式

    部分浏览器格式如下(PC):

    • chrome浏览器:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWEBKit/537.36 (Khtml, like Gecko) Chrome/62.0.3202.94 Safari/537.36

    • IE11浏览器:Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; McAfee; rv:11.0) like Gecko

    • safari 5.1 – Mac:User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50

    • safari 5.1 – Windows:User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50

    • Firefox 4.0.1 – MAC:User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

    • Firefox 4.0.1 – Windows:User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

    • Opera 11.11 – MAC:User-Agent:Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11

    • Opera 11.11 – Windows:User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11

    • 360浏览器:User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)

    • 搜狗浏览器 1.x:User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.X MetaSr 1.0; SE 2.X MetaSr 1.0; .NET CLR 2.0.50727; SE 2.X MetaSr 1.0)

    部分浏览器格式如下(移动端):

    • iphone6:Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1

    • ipad:Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1

    • Android QQ浏览器 For android:User-Agent: MQQBrowser/26 Mozilla/5.0 (linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

    • Windows Phone:User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)

    • BlackBerry:User-Agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+

    • UC标准:User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999

    二、通过navigator.platfORM来进行浏览器类型判断

    因为各大浏览器厂商可以对navigator.userAgent进行设置,导致了userAgent格式的混乱。例如:华为mate10 默认浏览器 userAgent的信息如下:

    Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.89 Safari/537.36

    结果可想而知,根据userAgent做出的判断:当前浏览器类型为PC。所以需要在通过navigator.userAgent判断的基础上再对navigator.platform进行判断,以此来确保浏览器类型判断的准确性。

    定义和用法

    platform 属性是一个只读的字符串,声明了运行浏览器的操作系统和(或)硬件平台。

    语法

    navigator.platform

    navigator.platform使用场景

    判断是Android或者iOS
    function getPlatformType() {  if ('Android' === navigator.platform) {    return 'Android'  } else if ('iPhone' === navigator.platform || 'iPod' === navigator.platform || 'iPad' === navigator.platform) {    return 'iOS'  }}

    navigator.platform返回的可能值

    > HP-UX
    > Linux i686
    > Linux armv7l
    > Mac68K
    > MacPPC
    > MacIntel
    > SunOS
    > Win16
    > Win32
    > WinCE
    > iPhone
    > iPod
    > iPad
    > Android
    >黑莓
    >歌剧

    三、通过屏幕尺寸来进行浏览器类型判断

    通过屏幕大小可以判断浏览器类型

    获取屏幕宽度的方法如下:

    • 网页可见区域宽:document.body.clientWidth

    • 网页可见区域高:document.body.clientHeight

    • 网页可见区域宽:document.body.offsetWidth (包括边线的宽)

    • 网页可见区域高:document.body.offsetHeight (包括边线的宽)

    关于“vue开发中不同浏览器的类型判断方式是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

    --结束END--

    本文标题: vue开发中不同浏览器的类型判断方式是什么

    本文链接: https://www.lsjlt.com/news/325757.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    本篇文章演示代码以及资料文档资料下载

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档
    猜你喜欢
    • C++ 生态系统中流行库和框架的贡献指南
      作为 c++++ 开发人员,通过遵循以下步骤即可为流行库和框架做出贡献:选择一个项目并熟悉其代码库。在 issue 跟踪器中寻找适合初学者的问题。创建一个新分支,实现修复并添加测试。提交...
      99+
      2024-05-15
      框架 c++ 流行库 git
    • C++ 生态系统中流行库和框架的社区支持情况
      c++++生态系统中流行库和框架的社区支持情况:boost:活跃的社区提供广泛的文档、教程和讨论区,确保持续的维护和更新。qt:庞大的社区提供丰富的文档、示例和论坛,积极参与开发和维护。...
      99+
      2024-05-15
      生态系统 社区支持 c++ overflow 标准库
    • c++中if elseif使用规则
      c++ 中 if-else if 语句的使用规则为:语法:if (条件1) { // 执行代码块 1} else if (条件 2) { // 执行代码块 2}// ...else ...
      99+
      2024-05-15
      c++
    • c++中的继承怎么写
      继承是一种允许类从现有类派生并访问其成员的强大机制。在 c++ 中,继承类型包括:单继承:一个子类从一个基类继承。多继承:一个子类从多个基类继承。层次继承:多个子类从同一个基类继承。多层...
      99+
      2024-05-15
      c++
    • c++中如何使用类和对象掌握目标
      在 c++ 中创建类和对象:使用 class 关键字定义类,包含数据成员和方法。使用对象名称和类名称创建对象。访问权限包括:公有、受保护和私有。数据成员是类的变量,每个对象拥有自己的副本...
      99+
      2024-05-15
      c++
    • c++中优先级是什么意思
      c++ 中的优先级规则:优先级高的操作符先执行,相同优先级的从左到右执行,括号可改变执行顺序。操作符优先级表包含从最高到最低的优先级列表,其中赋值运算符具有最低优先级。通过了解优先级,可...
      99+
      2024-05-15
      c++
    • c++中a+是什么意思
      c++ 中的 a+ 运算符表示自增运算符,用于将变量递增 1 并将结果存储在同一变量中。语法为 a++,用法包括循环和计数器。它可与后置递增运算符 ++a 交换使用,后者在表达式求值后递...
      99+
      2024-05-15
      c++
    • c++中a.b什么意思
      c++kquote>“a.b”表示对象“a”的成员“b”,用于访问对象成员,可用“对象名.成员名”的语法。它还可以用于访问嵌套成员,如“对象名.嵌套成员名.成员名”的语法。 c++...
      99+
      2024-05-15
      c++
    • C++ 并发编程库的优缺点
      c++++ 提供了多种并发编程库,满足不同场景下的需求。线程库 (std::thread) 易于使用但开销大;异步库 (std::async) 可异步执行任务,但 api 复杂;协程库 ...
      99+
      2024-05-15
      c++ 并发编程
    • 如何在 Golang 中备份数据库?
      在 golang 中备份数据库对于保护数据至关重要。可以使用标准库中的 database/sql 包,或第三方包如 github.com/go-sql-driver/mysql。具体步骤...
      99+
      2024-05-15
      golang 数据库备份 mysql git 标准库
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作