User-Agent Mobile Device check

Utilize the User-Agent string to determine with JavaScript if the device accessing the page/app is a Mobile Device or not (Desktop, TV, Projector or other large screen, etc)

by dshilkret

HTML

<div id="device" title="Device type"> ... </div>
<div id="referrer"> </div>

CSS

#device { background-color: green; }

//TV
@media tv { #device { background-color: red; } }

//Projector
@media projection { #device { background-color:blue; } }

/////MOBILE/////
@media screen and (max-width : 480px) { #device{background-color:yellow;} }

//iPhone
@media screen and (max-width : 320px) { #device{background-color:yellow;} }


//iPad
@media screen and (max-width : 768px) { #device{background-color:yellow;} } 

//HTC One, Samsung Galaxy S5, OnePlus One
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { #device{background-color:yellow;} }

//Samsung Galaxy S2
@media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) { #device{background-color:yellow;} }

//Samsung Galaxy S3
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) { #device{background-color:yellow;} }

//Samsung Galaxy S4
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { #device{background-color:yellow;} }

//LG Nexus 4
@media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) { #device{background-color:yellow;} }

//LG Nexus 5, Huawei Ascend P7
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { #device{background-color:yellow;} }

//Asus Nexus 7
@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) { #device{background-color:yellow;} }

//iPad 1, iPad 2, iPad Mini
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) { #device{background-color:yellow;} }

//iPad 3, iPad 4
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) { #device{background-color:yellow;} }

//iPhone 3G
@media screen...

JavaScript

function setDevice(txt) {
  var text = txt || '';
  document.getElementById('device').innerHTML = text;
}

function setReferrer() {
  document.getElementById('referrer').innerHTML = document.referrer;
}

/* ----------------------------------------------------- */
var ua = navigator.userAgent.toLowerCase(),
  platform = navigator.platform.toLowerCase();

platformName = ua.match(/ip(?:ad|od|hone)/) ? 'ios' : (ua.match(/(?:webos|android)/) || platform.match(/mac|win|linux/) || ['other'])[0],

  isMobile = /ios|android|webos/.test(platformName);

if (isMobile) {
  setDevice('Mobile - ' + platformName);
} else if (document.getElementById('device').style.backgroundColor === 'red') {
  setDevice('TV - ' + platformName);
} else if (document.getElementById('device').style.backgroundColor === 'blue') {
  setDevice('Projector - ' + platformName); //only works well in Opera
} else {
  setDevice('Desktop - ' + platformName);
}