用js判断当前设备(电脑or手机)、浏览器、操作系统

今天在做一个网站浏览量记录功能的时候,发现网上有很多方法判断出当前的设备、浏览器和操作系统
我对其进行了整理:

需求
添加一条浏览记录,需要在前台拿到以下数据:
判断出当前设备是电脑还是手机:

  • 电脑:
    • 判断出操作系统、浏览器
  • 手机:
    • 判断出操作系统

代码实现:

 // 当前产品浏览量加一
        function addVisit(proId) {
            //此处是拿到cookie中当前会员的id
            var userId = $.cookie('id');

            //如果是电脑,则判断电脑的操作系统
            function detectOS() {
                var sUserAgent = navigator.userAgent;
                var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
                var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
         
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue.js中可以使用第三方库"bowser"来判断当前浏览器是否支持。可以在main.js中导入bowser库,然后在Vue实例中使用bowser.check()方法来进行判断。 例如: ``` import bowser from 'bowser' if (bowser.check({ chrome: '73' })) { console.log('The browser is Chrome 73 or newer') } ``` 也可以直接使用bowser.chrome,bowser.safari等属性来判断当前浏览器是否为chrome或safari等。 例如: ``` if (bowser.chrome) { console.log('The browser is Chrome') } ``` ### 回答2: 在Vue中,我们可以通过判断navigator.userAgent中的信息来判断当前浏览器是否支持。navigator.userAgent是一个包含有关浏览器操作系统的信息的只读字符串。 首先,我们可以创建一个包含支持的浏览器信息的数组,例如["Chrome", "Firefox", "Safari", "Opera", "Edge"]。 然后,我们可以通过使用数组的some方法来检查navigator.userAgent是否包含支持的浏览器信息。如果包含其中一个浏览器信息,则返回true,表示当前浏览器支持,否则返回false,表示当前浏览器不支持。 具体的代码实现如下: ```javascript function isBrowserSupported() { const supportedBrowsers = ["Chrome", "Firefox", "Safari", "Opera", "Edge"]; const userAgent = navigator.userAgent; return supportedBrowsers.some(browser => userAgent.indexOf(browser) > -1); } // 调用isBrowserSupported函数来检查当前浏览器是否支持 if (isBrowserSupported()) { console.log("当前浏览器支持"); } else { console.log("当前浏览器不支持"); } ``` 请注意,这种方法只是对浏览器进行简单的判断,不能保证100%准确,因为用户可以通过修改userAgent来伪装浏览器信息。因此,如果您需要更精确的浏览器支持判断,可以考虑使用现有的浏览器检测库。 ### 回答3: Vue本身并没有提供直接的方法来判断当前浏览器是否支持。但是我们可以借助于现有的JavaScript方法来判断。 一种常用的方法是使用User Agent字符串来判断浏览器类型。可以通过`navigator.userAgent`获取到当前浏览器的User Agent字符串。 我们可以根据不同浏览器的User Agent字符串特征来判断是否支持Vue。以下是一些常见的浏览器User Agent字符串特征: - Chrome: "Chrome" - Firefox: "Firefox" - Safari: "Safari" - Edge: "Edge" - Internet Explorer: "MSIE" 或 "Trident" 我们可以使用正则表达式来匹配User Agent字符串来判断浏览器类型。以下是一个简单的例子: ```javascript const isSupportedBrowser = () => { const userAgent = navigator.userAgent; const supportedBrowsers = /(Chrome|Firefox|Safari|Edge|MSIE|Trident)/i; return supportedBrowsers.test(userAgent); }; if (isSupportedBrowser()) { // 当前浏览器支持Vue } else { // 当前浏览器不支持Vue } ``` 当然,这只是一种简单的判断方式,并不能 100% 确定浏览器是否能够支持Vue。此外,浏览器的User Agent字符串也可以被篡改。因此,更加可靠的判断浏览器是否支持Vue的方式是通过检测浏览器是否支持一些特定的JavaScript特性和API,比如ES6的语法支持、DOM和CSSOM的相应API等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值