Bedienbarkeit gewährleisten

Mittels Media-Queries läßt sich die Ausgabe einer Webseite für verschiedene Monitorgrößen konfektionieren. In einigen Fällen ist es für den Webentwickler aber auch sehr wichtig, zu entscheiden ob das Gerät des Nutzers per Maus oder Touchscreen bedient wird. Wird z.B. das Hover event genutzt um ein Dropdown Menu auszuklappen, bleibt diese auf Touchscreens verborgen. Hier helfen die Media-Queries nur bedingt weiter, da Smartphones teilweise sehr hoch auflösende Displays haben, die in ihrern Pixelanzahl durchaus kleinen Laptops entsprechen. Desweiteren verfügen moderne Laptops zunehmend über Touchscreens. 

Eine einfache Lösung bietet folgendes JQuery Script:

Script einbinden

Mit diesem JQuery Script wird dem Root Tag einer Webseite eine CSS-Klasse abhängig von der Verwendung einer Maus bzw. Touchscreen zugewiesen:

(function($){
  var checkMobile = function(){
  //Check Device
  var isTouch = ('ontouchstart' in document.documentElement);
  //Check Device //All Touch Devices
  if ( isTouch ) {
    $('html').addClass('touch');
  }
  else {
    $('html').addClass('no-touch');
  };
};
//Execute Check
checkMobile();
})(jQuery);

Kommentar schreiben


Sicherheitscode
Aktualisieren

Quick Menu

FacebookTwitterDiggGoogle BookmarksTechnoratiLinkedin