How do I detect browser and mobile together? JavaScript

Question

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.com/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.com/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
             }

        }
    }
}

CoderLee · Answer 1 · 2020-11-02T13:56:56.377

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

I tried declaring the suggested code, then implementing it in my var mobile declaration, instead of navigator.userAgent. Then I tested mobile as a bool, like I did before, but when I try and run it on my phone it still doesn't work. Am I doing this right? — Stratocasder, Jan 07 '20 at 21:50

score 1 · Answer 2 · answered Mar 27 '20 at 10:53

1

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

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

answered Mar 27 '20 at 10:53

Yassine Zaroui

404
3
13

How do I detect browser and mobile together? JavaScript

2 Answers2