There are times when it is very important to know as much as you can about the user of your application. A good example is how I need to know where the user physically is in order to calculate the distance between them and the park in the state parks app. Another example is if the user is on a mobile device vs a desktop or if they are online or not, so that you know what to show them and how to do it. Let’s take a look at a few ways you can gather information about the user.
Detect window height and width
Before we go any further, I just want to say that I don’t intend this to be a replacement for media queries (something that I really need to write a post about at some point). If you look at window.innerWidth and window.innerHeight within your javascript, you can get the width and height of the browser window in pixels. Let’s take a look at a quick example.
See the Pen
Detect changes in window height and width by Joe Steinbring (@steinbring)
on CodePen.
In the above example, I am using an event listener to update the values as you resize the window but the values are still coming from window.innerWidth and window.innerHeight. Among other things, if you know which value is larger than the other, you can determine if the device is being held in a landscape orientation or a portrait orientation.
User-agent string
The user-agent string can give you all kinds of important information about the device (what operating system they are using, what browser, and what browser version). Unfortunately, browser makers have crapped this value up a lot over the past decade. It was mainly due to people writing apps that blocked specific browsers or browser versions based upon it. Let’s take a look at a quick example.
See the Pen
Navigator userAgent Property by Joe Steinbring (@steinbring)
on CodePen.
As you can see, the string ends up looking like “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36” and what the hell is that? Mozilla? Chrome? Safari? Who the hell knows! Things used to be a lot easier on this front.
Detect if the user is on a touchscreen device
In this next example, we are using window.matchMedia("(pointer: coarse)").matches to figure out if the device the user is using has a touchscreen or not. Let’s take a look how it works.
See the Pen
How to detect if the device is a touchscreen device by Joe Steinbring (@steinbring)
on CodePen.
You might be able to use this to conditionally increase the size of touch targets or something. Personally, I would just use reasonably sized touch targets all the time, though.
Pulling it all together
After coming up with these three demos, I felt like I needed to come up with a cohesive demo that used all three, so I came up with “Drake likes phones in landscape.” 🙂
See the Pen
Drake *only* likes phones in landscape by Joe Steinbring (@steinbring)
on CodePen.
The idea of “Drake likes phone in landscape” is that he will reject any attempt to visit the website on a desktop or laptop device and he will reject any attempt to view the site in portrait mode. As soon as you visit the site on a phone while holding it in landscape mode, he will approve. 🙂 I know that it is a goofy demo but I was in a goofy mood.
Have any questions, comments, etc? Feel free to leave a comment, below.