Essential JavaScript Functions for Detecting User’s Device Characteristics

Learn how to detect iOS, Android, fullscreen mode, Firefox, Safari, and more with JavaScript.

Nov 12, 2023

#javascript #programming #webdev #showdev

Photo by Bram Naus on Unsplash

Time and again, I’ve encountered the need to implement features in my web-based projects that specifically target certain types of devices. Each time, I find myself falling back on the same set of utilities I’ve been using for years. It’s high time I shared these invaluable tools in a blog post.

In this article, you’ll gain access to a curated collection of JavaScript functions for identifying iOS and Android devices, detecting fullscreen mode, distinguishing Firefox from Safari, and more.

It’s important to be aware that some of these methods are based on parsing the navigator user-agent string, which might see changes in the future as Google plans to reduce the information provided by this string.


Let’s start with the detection of a mobile device. I determine if a user is using my applications in a browser-based environment that might be a mobile device by testing whether the user is using a pointing device with limited accuracy, such as a touch screen, and which is not a precise device such as a mouse.

const isMobile = (): boolean => { const isTouchScreen = window.matchMedia("(any-pointer:coarse)").matches; const isMouseScreen = window.matchMedia("(any-pointer:fine)").matches; return isTouchScreen && !isMouseScreen; };

The matchMedia interface returns an object that can be used to determine if the document or web page matches a specific media query. To test the pointing device, I utilize the any-pointer CSS media feature.


Identifying an iPad device involves inspecting the user-agent, but it also necessitates combining this data with the previous mobile detection function. This is because Safari presents a string similar to that of desktop or laptop devices.

const isIPad = (): boolean => { const { navigator: { userAgent } } = window; // iOS 12 and below if (/iPad/i.test(userAgent)) { return true; } // iOS 13+ return /Macintosh/i.test(userAgent) && isMobile(); };

On older versions of iPadOS, the user-agent used to include the indentation; therefore, I also check if the string might contain this information.

Note that the i in the regex showcased in this article stands for insensitive meaning it performs a test without considering case sensitivity.


I combine iPhone and iPod into a single function because their user experience is similar for my projects. Both can be tested by querying the user-agent, which contains their indication.

const isIPhone = (): boolean => /iPhone|iPod/i.test(window.navigator.userAgent);


I assume you already know the answer: to detect if a device is running iOS, we can simply use the two previous functions.

const isIOS = (): boolean => isIPhone() || isIPad();


Similar to iPhones, detecting Android devices is straightforward because the necessary information is provided in the user-agent string.

const isAndroid = (): boolean => /android/i.test(window.navigator.userAgent);


According to my tests, an Android tablet is an Android device, which is strangely not identified by the keyword mobile in its user-agent string.

const isAndroidTablet = (): boolean => isAndroid() && !/mobile/i.test(window.navigator.userAgent);


Once, I also had to determine if the user’s device was held in portrait mode. Instead of comparing screen dimensions, I utilized the matchMedia interface to determine the orientation of the device.

const isPortrait = (): boolean => window.matchMedia("(orientation: portrait)").matches;


Similarly, we can implement the opposite of the previous function to determine if the device’s orientation is in landscape mode.

const isLandscape = (): boolean => !isPortrait();


To determine if a browser is used in fullscreen mode, I typically use the document fullscreenElement property, but I also check vendor-specific properties that are supposed to reflect the same information.

const isFullscreen = (): boolean => { return ( // @ts-ignore // prettier-ignore !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) ); };


While the navigator vendor property is marked as deprecated by MDN, I still rely on it to check if a browser is Safari.

const isSafari = (): boolean => /apple/i.test(navigator.vendor);

You might argue that this would also return true on an iPhone when, for example, Chrome is used. To that, I would offer a friendly reminder that any browser running on an iPhone or iPad is, unfortunately, still Safari due to Apple’s vendor lockdown monopoly.


Knowing if an application is running in a Firefox browser can be determined by checking the user-agent string.

const isFirefox = (): boolean => /firefox/i.test(window.navigator.userAgent);


Finally, if your application focuses on internationalization, this is how I determine if the content should be read from right to left. I set the dir attribute at the top level of the document.

const isRTL = (): boolean => { const htmlDir = document.documentElement.getAttribute("dir"); return htmlDir === "rtl"; };

To infinity and beyond.