Mobile Geräte erkennen mit JavaScript

Oftmals müssen Webseiten an ein spezifisches Endgerät angepasst werden. Dazu muss man wissen, mit welchem Gerät man es überhaupt zu tun hat. Dabei kann einem die Navigator userAgent Property behilflich sein.

var userAgent = navigator.userAgent.toLowerCase();
if(userAgent.match('iphone'))
  alert('Hello iPhone!');
else if(userAgent.match('ipad'))
  alert('Hello iPad!');
else if(userAgent.match('android'))		
  alert('Hello Android!');
else if(userAgent.match('windows phone'))		
  alert('Hello Windows Phone!');
else
  alert('Hello '+userAgent);

Möchte man etwas detaillierter auf die Geräte eingehen, kann man das wie folgt tun:

if(userAgent.match('iemobile/9.0'))		
  alert('Hello Windows Phone 7!');

Pauschal könnte man auch sagen, dass alle Geräte die auf Toucheingaben reagieren, auch mobile Endgeräte sind. Problematisch wird das dann nur bei Tablet-PCs, welche sowohl auf Touch- als auch auf Klick-Events reagieren. Trotzdem möchte ich diese Herangehensweise mal zeigen:

// Detect mobile devices
if(typeof(document.ontouchstart) != 'undefined'){
  alert('Touch (maybe mobile?) device!');
}

Wenn man ein event zur Hand hat, kann man auch Folgendes tun:

if(typeof(event.touches) == 'undefined'){
  alert('Touch (maybe just mobile?) device!');
}

An dieser Stelle noch ein paar beispielhafte User Agents:

Desktop (Windows 8 RP):
Mozilla/5.0 (Windows NT 6.2; WOW64; rv:14.0) Gecko/20100101 Firefox/14.0.1 
Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.6 (KHTML, like Gecko) Chrome/23.0.1241.0 Safari/537.6
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Zune 4.7; Tablet PC 2.0)
 
iPad 3:
Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
 
iPhone 4:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_5 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5
 
iPhone 4S:
Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
 
Android:
Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Nexus S Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
 
Windows Phone:
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; NOKIA; Lumia 800)

Schreibe einen Kommentar Antworten abbrechen