How to know what device been used to view website using javascript?

Question

With CSS, you can use @media to manipulate website style depending on the screen size.

Can I do the same with JavaScript?

situation:

if website opens using a phone:

    id.style.width='500px';

if website opens using a tablet:

    id.style.width='800px';

Possible duplicate of https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser and https://stackoverflow.com/questions/6850164/get-the-device-width-in-javascript — glinda93, Jul 05 '20 at 11:29

score 4 · Answer 1 · answered Jul 05 '20 at 11:16

You can use matchMedia(). Like this:

if (window.matchMedia('(min-width: 600px)').matches) {
  console.log("this window bigger than 600px");
}

You should get matches key for Boolean value. Because window.matchMedia('(min-width: 600px)') returns an object.

console.log(window.matchMedia('(min-width: 600px)'));

1 Answers1