vue检测是不是360浏览器兼容模式_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 /**
* 判断浏览器类型: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 /**
* 判断是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检测是不是360浏览器兼容模式_vue开发之不同浏览器的类型判断相关推荐
- vue检测是不是360浏览器兼容模式_Vue项目 IE/360浏览器兼容模式下打开空白的问题...
记一次bug解决 bug发现 项目不复杂,就是一个基于vue-cli3搭建的pc端项目 在开发进入后半段的时候发现在360浏览器兼容模式先显示空白而且没有报错,此类问题之前我写react在低版本的qq ...
- vue在微信里面的兼容问题_Vue在 iOS 微信浏览器下不能播放
问题的本质 以上定位到问题大概花了我半小时时间,但是我并没有找到问题的根本原因,于是我翻阅了 Vue.js 2.5 的 release log,由于很长就不列了.Vue.js 每次升级主要分成 2 大 ...
- 浏览器兼容模式如何设置?只需要跟着下面的步骤设置
许多考生在报考教师资格证或者其他的考试报名,会遇到浏览器兼容设置的问题.与其到时急急忙忙来设置浏览器的兼容模式,不如提前设置好,免了后顾之忧.浏览器兼容模式怎么设置?一起来看看关于浏览器兼容模式的含义 ...
- vue检测是不是360浏览器兼容模式_360安全浏览器兼容模式无法访问vue怎么解决?...
360安全浏览器兼容模式无法访问vue怎么解决?下面本篇文章给大家介绍一下vue在IE和360兼容模式下无法显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 360兼容模式下 ...
- 解决360浏览器兼容模式的页面显示问题
解决360浏览器兼容模式的页面显示问题 参考文章: (1)解决360浏览器兼容模式的页面显示问题 (2)https://www.cnblogs.com/njy888888/p/7827200.html ...
- 360安全浏览器兼容模式怎么设置_测试新手一定要知道:最实用的Web兼容性测试经验都在这...
在日常工作中,我们经常碰到网页不兼容的问题.我们之所以要做兼容性测试,目的在于保证待测试项目在不同的操作系统平台上正常运行. 主要包括待测试项目能在同一操作系统平台的不同版本上正常运行:待测试项目能与 ...
- 偏偏在面试的时候踏入一个大坑--360浏览器兼容模式
之前从来没使用过360浏览器,也不知道他有兼容模式和极速模式.在线打开之前做过的案例(兼容模式),就完全傻眼了-乱七八糟.很绝望(最气人的是当时竟然没想到换个浏览器试试,哎,第一次面试果然让人记忆深刻 ...
- 自己碰到的360安全浏览器兼容模式的问题总结
公司之前做的网站项目现在兼容性出了问题,让我负责调试,我就懂一点前端代码,什么的DIV+CSS,hack都不了解,所以上网查了很多资料,也算是小有收获.此贴仅作为个人经验贴,大神还请指点. 遇到的问题 ...
- QQ浏览器及360浏览器兼容模式下怎么处理sessionStorage数据
现在很多网站都需要在兼容模式和极速模式下都适应,开发的时候一般都是谷歌浏览器,前端需要存储一些本地信息,一般用的最多的是localStorage跟sessionStorage.极速模式下或者谷歌浏览器 ...
最新文章
- 如何在SharePoint2010中添加Deep Zoom Image
- 本科理工男如何学习Linux
- JavaScript基础系列---闭包及其应用
- 数据中心行业哪个证书含金量最高?对职业最有帮助?
- linux常用命令(2)常用系统工作命令
- SAP Spartacus cost center list的数据源分析
- 2021年春季学期期末统一考试 高级财务会计 试题
- boot spring 没有父子容器_理解 MyBatis 是如何在 Spring 容器中初始化的
- php伪静态是什么,php路由设置伪静态
- 嵌入式开发笔记(二)嵌入式系统启动过程 (S5pv210)
- IIS Log的位置
- cw2vec:蚂蚁金服公开最新基于笔画的中文词向量算法
- cakephp helper ajax,在JS Helper CakePHP中手动触发事件
- maven install 报错 error:java找不到符号
- 计算机基础知识 图文,关于电脑基础知识学习【图文详解】
- c语言gets和puts的区别,C 语言 gets()和puts()
- logrus固定当天日志文件名称源码修改
- 实时折线图php mysql 源码_超级漂亮网址导航源码,自助链源码(PHP+MYSQL完整版)...
- 平均每个ICO项目存在5个高危漏洞,所有ICO移动应用都存在安全漏洞
- 大连海洋大学计算机考研资料汇总