JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<div class="android">Android</div>
<div class="iphone">iPhone</div>
<div class="ipad">iPad</div>
<div class="ios">iOS</div>
<div class="mobile">Welcome to the shiny world of mobile.</div>
<div class="desktop">Go away and come back with a mobile browser.</div>

CSS

.android, .iphone, .ipad, .ios, .mobile, .desktop { display:none; }
.dx-android .android { display: block; }
.dx-iphone .iphone { display: block; }
.dx-ipad .ipad { display: block; }
.dx-ios .ios { display: block; }
.dx-mobile .mobile { display: block; }
.dx-desktop .desktop { display: block; }

JavaScript

var ua = navigator.userAgent.toLowerCase();

var Dx = {};

Dx.android = ua.indexOf("android") > -1;
Dx.iPad = ua.indexOf("ipad") > -1;
Dx.iPhone = ua.indexOf("iphone") > -1;
Dx.iOS = Dx.iPad || Dx.iPhone;
Dx.mobile = Dx.iPad || Dx.iPhone || Dx.android;
Dx.desktop = !Dx.mobile;

// Add classes to html tag
Dx.addClassToHtml = function(cls) {
    var docElement = document.documentElement;
    docElement.className += ' ' + cls;
};

if (Dx.android) Dx.addClassToHtml("dx-android");
if (Dx.iPad) Dx.addClassToHtml("dx-ipad");
if (Dx.iPhone) Dx.addClassToHtml("dx-iphone");
if (Dx.iOS) Dx.addClassToHtml("dx-ios");
if (Dx.mobile) Dx.addClassToHtml("dx-mobile");
if (Dx.desktop) Dx.addClassToHtml("dx-desktop");