White Arrow icon
Back to all Elements

OS Detection with JavaScript

Short JavaScript code that detects which OS system the user is running and display div accordingly.

In short, what I did here is used the navigator.userAgent request header to detect what OS the user is running. This method is widely supported by browsers and not to hard to implement.

Once I know which OS, I show and hide divs in the project accordingly.

Here is the code:

<script>

if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {

 $("#android").hide();

 $("#web").hide();

}

else if ( /Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

 $("#ios").hide();

 $("#web").hide();

}

else {

   $("#ios").hide();

   $("#android").hide();

}

</script>

Copy

Preview:

browser mockup
Share:
Heart icon

Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...

Might also interest you:

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon

Maintain Form Height on Success

Code
jQuery

Using a little bit of jQuery to adjust the success message height

Read more
Blue arrow iconWhite Arrow icon