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 · Accepted Answer · 2020-11-02 13:56:56Z

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?

Yassine Zaroui · Accepted Answer · 2020-03-27 10:53:27Z

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

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

Collectives™ on Stack Overflow

How do I detect browser and mobile together? JavaScript

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related