user agent - How do I detect browser and mobile together? JavaScript - Stack Overflow

admin管理员组

文章数量:1302374

I am trying to recognize the browser with javascript so I can play a video fullscreen or just display an alert, I can recognize chrome and safari and all of them fine on laptops/desktops, it's just when I try to also recognize if the device is mobile it does not work. I do not get the alert I am trying to get. I tried this: . But I had no luck, among other things like this(the Original Answer because I am not sure what regex is?):
I have this now. I want to use User Agent unless there is a better way.
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
             }

        }
    }
}

I am trying to recognize the browser with javascript so I can play a video fullscreen or just display an alert, I can recognize chrome and safari and all of them fine on laptops/desktops, it's just when I try to also recognize if the device is mobile it does not work. I do not get the alert I am trying to get. I tried this: https://stackoverflow./a/3540295. But I had no luck, among other things like this(the Original Answer because I am not sure what regex is?): https://stackoverflow./a/11381730
I have this now. I want to use User Agent unless there is a better way.
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
             }

        }
    }
}

• javascript
• user-agent

Share Follow edited Jan 7, 2020 at 21:18 CoderLee 3,47966 gold badges3232 silver badges6565 bronze badges asked Jan 7, 2020 at 21:08 StratocasderStratocasder 10711 gold badge11 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You should use the navigator object for your checks. The ua variable isn't defined anywhere so you're not going to be able to access it. Try using this before your control structure, or all the if statements:

var ua = navigator.userAgent;

then you should be able to access the properties you're after to catch what's using the web page. You can also update your control flow to check for mobile first, since you have that bool value set early on. If it isn't mobile then jump down to your other code bits. Something like this should help:

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
  }
}

This is an extensive library for ReactJS (still Javascript). You can find your solution there :)

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

本文标签： user agentHow do I detect browser and mobile together JavaScriptStack Overflow