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文档
    猜你喜欢
    • vue开发中不同浏览器的类型判断方式是什么
      这篇文章将为大家详细讲解有关vue开发中不同浏览器的类型判断方式是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、通过navigator.userAgent来进行浏览器类型判断定义和用法userAg...
      99+
      2023-06-29
    • vue开发之不同浏览器的类型判断方式
      目录一、通过navigator.userAgent来进行浏览器类型判断定义和用法语法navigator.userAgent使用场景判断是Android或者iOS判断是否是微信浏览器判...
      99+
      2024-04-02
    • css中怎么判断浏览器类型
      css中怎么判断浏览器类型,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 CSS代码中,则可以根据各浏览器自己独...
      99+
      2024-04-02
    • PHP怎么判断当前使用的浏览器类型
      这篇文章主要介绍“PHP怎么判断当前使用的浏览器类型”,在日常操作中,相信很多人在PHP怎么判断当前使用的浏览器类型问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”PHP怎么判断当前使用的浏览器类型”的疑惑有所...
      99+
      2023-06-04
    • css布局中怎么用JS判断浏览器类型及版本
      这篇文章主要讲解了“css布局中怎么用JS判断浏览器类型及版本”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css布局中怎么用JS判断浏览器类型及版本”吧!...
      99+
      2024-04-02
    • 不同类型的SQL触发器是什么?
      sql触发器有哪几种,需要具体代码示例。 在SQL数据库中,触发器是一种特殊类型的存储过程,可以在数据库中的特定事件发生时自动执行。触发器通常用于实现数据完整性和业务逻辑约束。SQL触...
      99+
      2024-02-22
      sql 触发器 种类
    • 网页开发中内容的浏览设计方式是什么
      这篇文章将为大家详细讲解有关网页开发中内容的浏览设计方式是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。对于一个内容页的文章来说,如果这个文章内容过长或是其中有分类(排行),那么进行分页...
      99+
      2023-06-08
    • mybatis参数String与Integer类型的判断方式是什么
      这篇文章主要介绍“mybatis参数String与Integer类型的判断方式是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“mybatis参数String与Integer类型的判断方式是什么”...
      99+
      2023-06-29
    • Python字符类型判断的方法是什么
      Python中判断字符类型的方法有以下几种:1. 使用type()函数判断字符的类型。例如,type('a')的返回结果是,表示字符...
      99+
      2023-08-19
      Python
    • java判断文件类型的方法是什么
      Java可以通过以下方法来判断文件的类型:1. 使用java.nio.file.Files类的probeContentType()方...
      99+
      2023-10-09
      java
    • vue本地环境判断的方式是什么
      这篇文章主要介绍“vue本地环境判断的方式是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue本地环境判断的方式是什么”文章能帮助大家解决问题。判断本地环境在windows下只需要安装插件&n...
      99+
      2023-06-30
    • 使用CSS媒体查询和JavaScript判断浏览器设备类型的方法是咋样的
      今天就跟大家聊聊有关使用CSS媒体查询和JavaScript判断浏览器设备类型的方法是咋样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。有无数的理...
      99+
      2024-04-02
    • CSS中hack兼容不同浏览器的写法是什么
      这篇文章主要介绍了CSS中hack兼容不同浏览器的写法是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 IE6相比老的版本涉猎器,用...
      99+
      2024-04-02
    • HTML在浏览器中布局不居中的方法是什么
      这篇文章主要介绍“HTML在浏览器中布局不居中的方法是什么”,在日常操作中,相信很多人在HTML在浏览器中布局不居中的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
      99+
      2024-04-02
    • python输入数据判断数据类型的方法是什么
      在Python中,可以使用`type()`函数来判断数据的类型。例如:```pythondata = input("请输入...
      99+
      2023-08-11
      python
    • vue动态设置浏览器标题的方法是什么
      本篇文章给大家分享的是有关vue动态设置浏览器标题的方法是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。废话平时设置浏览器标题是这样的但vue是单页面应用,入口文件也只有一...
      99+
      2023-06-22
    • C#枚举类型开发的方法是什么
      本篇内容主要讲解“C#枚举类型开发的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“C#枚举类型开发的方法是什么”吧!:C#枚举类型开发学习心得终于用 C# 去正式写我的***个程序了,...
      99+
      2023-06-17
    • Go 的“类型断言”方式背后的原因是什么?
      问题内容 我试图理解这样一个事实:golang 的类型断言仅适用于显式定义为接口类型的变量,不适用于具体类型(即“string”、“int32”)等..)。 这是一个快速而简单的代码示...
      99+
      2024-02-06
      overflow
    • js开发中的页面、屏幕、浏览器的位置原理是什么
      本篇内容介绍了“js开发中的页面、屏幕、浏览器的位置原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、介绍1. 容器一个页面的展示...
      99+
      2023-07-05
    • 数据库中的记录类型判断非空的办法是什么
      本篇内容主要讲解“数据库中的记录类型判断非空的办法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“数据库中的记录类型判断非空的办法是什么”吧!我创建了如下的...
      99+
      2024-04-02
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作