0

I don't find a way in JavaScript to get on what device my website is open.

I want something like this:

if ( website.size < 768px) {
  //do something for mobile
}

I know that I can use a media query in CSS, but I want use JS, and I'm very curious if it's possible without CSS.

window.matchMedia or window.width don't seem to work because they take the size of my window.

In difference on the related question is this case is to make a responsive website. So, the related answer doesn't resolve the case where the user resize the window in computer.

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Axel G
  • 13
  • 5
  • 1
    try this [answer](https://stackoverflow.com/a/8876069/3807365) about getting the viewport width – IT goldman Nov 09 '22 at 20:29
  • So you don't want computer users to have access to mobile view ? – HmBloqued Nov 09 '22 at 20:29
  • 1
    You can use `.matches()` from JavaScript, it takes a CSS selector as an argument and returns true or false. – Pointy Nov 09 '22 at 20:29
  • 1
    Potential duplicate of: https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser – dangarfield Nov 09 '22 at 20:29
  • @ITgoldman Thx! I think it's the easiest way to do that. – Axel G Nov 09 '22 at 20:45
  • @HmBloqued Nop, I turn my website in responsive, I want that they can use both. – Axel G Nov 09 '22 at 20:46
  • @dangarfield Seems to be one, I didn't realize before writing the answer . Should I just delete my answer or something? – Syed M. Sannan Nov 09 '22 at 20:56
  • @Pointy .matches() seem to work with window.matchMedia(...) so it took the size of the window not the page. – Axel G Nov 09 '22 at 20:58
  • @dangarfield yeah it's another solution, the most answer is to use a userAgent with Regex. Maybe a little complicated for this issue ? – Axel G Nov 09 '22 at 21:01
  • I think you ate wrong. A responsive website scales automatically as you resize your window. or if you start off on a small screen. There is no difference at all in the two. – Rohit Gupta Nov 14 '22 at 04:14

2 Answers2

2

You shouldn't really be relying on the viewport width to know if the user is on mobile or not as the computer user can just resize their browser window before visiting the site to trick you.

You may instead use navigator.userAgent in JavaScript to know their devices.

I found a cool regex that detects if the user is on a mobile device using the navigator.userAgent property.

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  // true for mobile device
  document.write("mobile device");
}else{
  // false for not mobile device
  document.write("not mobile device");
}

It checks all the mainstream mobile clients using a regex on the navigator.userAgent property and if there is a match returns true, false otherwise.

Learn more about navigator.userAgent

Syed M. Sannan
  • 1,061
  • 2
  • 9
  • 28
  • 1
    Thanks for your answer! It seem to be a solution used by lot of peoples for this issue, but it's not a problem for responsive website if the users resize the window so we can use this answer wich work for all mobile https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions/8876069#8876069 (shared by @IT goldman) – Axel G Nov 09 '22 at 21:10
  • @AxelG Agreed!! – Syed M. Sannan Nov 09 '22 at 21:28
1

So, their are many ways to resolve this

  • navigator.userAgent with Regex, best way if you don't want that the user trick you on browser by changing the window size like @Stranger said (related answer Detecting a mobile browser).

  • use this to get width and height of the website : (more info on this answer shared by @IT goldman)

const vw = Math.max(
  document.documentElement.clientWidth || 0,
  window.innerWidth || 0
);
const vh = Math.max(
  document.documentElement.clientHeight || 0,
  window.innerHeight || 0
);
Axel G
  • 13
  • 5