如何同时检测浏览器和移动设备？JavaScript

Question

如何同时检测浏览器和移动设备？JavaScript

5

我正在尝试使用JavaScript识别浏览器，以便可以全屏播放视频或仅显示警报。我可以在笔记本电脑/台式机上正确识别Chrome和Safari等所有浏览器，但是当我尝试识别设备是否为移动设备时，它不起作用。我没有收到我想要的提醒。我尝试了这个：https://dev59.com/YnA75IYBdhLWcg3wBkO1#3540295。但我没有成功，还有其他像这样的问题（原始答案因为我不确定正则表达式是什么？）：https://dev59.com/WWgu5IYBdhLWcg3wWl4q#11381730
我现在有这个。除非有更好的方法，否则我想使用用户代理。
JS:

function goFullscreen(id) {
  var element = document.getElementById(id); 
  var mobile = /Android|webOS|iPhone|iPad|iPod/i.test(navigator.userAgent);

  if (ua.indexOf('safari') != -1) { 
      if (ua.indexOf('chrome') > -1) {
        if (element.webkitRequestFullScreen) {
            if(mobile) {
                // some code for chrome mobile
                alert("chrome mobile")
            }else{
                //document.getElementById(id).classList.toggle("videoChange")
                alert("chrome desktop")
            }
        }
      } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen(); //edge do somethig else
      } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen(); //mozilla do somethig else  
      } else if (element.webkitRequestFullScreen) {
             if(mobile) {
                 // some code for safari mobile
                 alert("safari mobile")
             }else{
                element.webkitRequestFullScreen(); //safari do somethig else
             }

        }
    }
}

- Stratocasder

2个回答

1

这是一个针对ReactJS的广泛库（仍为Javascript）。您可以在那里找到解决方案 :)

https://github.com/duskload/react-device-detect

- Yassine Zaroui

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CoderLee · Accepted Answer

您应该使用导航器对象进行检查。因为ua变量没有定义在任何地方，所以您将无法访问它。在所有if语句之前尝试使用以下内容：

navigator对象

var ua = navigator.userAgent;

那么，您应该能够访问您想要捕获的属性以追踪正在使用网页的内容。您还可以更新控制流程以首先检查移动设备，因为您已经在早期设置了布尔值。如果它不是移动设备，则跳转到其他代码段。类似这样的代码应该有所帮助：

function goFullscreen(id) {
  var ua = navigator.userAgent;
  var element = document.getElementById(id);
  var isMobile = /Android|webOS|iPhone|iPad|iPod/i.test(ua);

  if (isMobile) {
    // some code for mobile
    alert("on mobile: " + navigator.platform); // display the platform you're on.
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen(); //edge do somethig else
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen(); //mozilla do somethig else  
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen(); //safari do somethig else
  }
}