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.

Improve this question
10
  • 1
    try this answer about getting the viewport width Commented Nov 9, 2022 at 20:29
  • So you don't want computer users to have access to mobile view ? Commented Nov 9, 2022 at 20:29
  • 1
    You can use .matches() from JavaScript, it takes a CSS selector as an argument and returns true or false. Commented Nov 9, 2022 at 20:29
  • 1
    Potential duplicate of: stackoverflow.com/questions/11381673/detecting-a-mobile-browser Commented Nov 9, 2022 at 20:29
  • @ITgoldman Thx! I think it's the easiest way to do that. Commented Nov 9, 2022 at 20:45

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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 stackoverflow.com/questions/1248081/… (shared by @IT goldman)
@AxelG Agreed!!
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 );
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.