当前位置:   article > 正文

使用navigator.userAgent 判断当前浏览器所处的环境

navigator.useragent

navigator.userAgent : 浏览器用于 HTTP 请求的用户代理头的值,通过UserAgent可以取得浏览器类别、版本,客户端操作系统等信息。

  • 在PC端打开 ,navigator.userAgent 显示如下
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

  • 在手机web端打开 ,navigator.userAgent 显示如下
    Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1


场景1:判断页面是在手机端还是PC端打开

window.location.href=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?"http://localhost:8888/mobile_web":"http://localhost:8888/PC";

场景2:判断页面是在手机端,平板端还是PC端打开(

  1. var os = function (){
  2. var ua = navigator.userAgent,
  3. isWindowsPhone = /(?:Windows Phone)/.test(ua),
  4. isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
  5. isAndroid = /(?:Android)/.test(ua),
  6. isFireFox = /(?:Firefox)/.test(ua),
  7. isChrome = /(?:Chrome|CriOS)/.test(ua),
  8. isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
  9. isPhone = /(?:iPhone)/.test(ua) && !isTablet,
  10. isPc = !isPhone && !isAndroid && !isSymbian;
  11. return {
  12. isTablet: isTablet,
  13. isPhone: isPhone,
  14. isAndroid: isAndroid,
  15. isPc: isPc
  16. };
  17. }();
  18. if (os.isAndroid || os.isPhone) {
  19. alert("手机" );
  20. } else if (os.isTablet) {
  21. alert("平板" );
  22. } else if (os.isPc) {
  23. alert("电脑" );
  24. }

场景3:获取操作系统类型,判断是Android或者IOS

  1. /**
  2. * 获取操作系统类型,
  3. * 0 Android
  4. * 1 iOS
  5. */
  6. function getOSType() {
  7. if (/(Android)/i.test(navigator.userAgent)) {
  8. return 0;
  9. } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  10. return 1;
  11. } else {
  12. return 2;
  13. }
  14. }

场景4:判断当前环境是否是微信环境

  1. function is_weixin(){
  2. var ua = navigator.userAgent.toLowerCase();
  3. if(ua.match(/MicroMessenger/i)=="micromessenger") {
  4. return true;
  5. } else {
  6. return false;
  7. }
  8. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/101714?site
推荐阅读