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:
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);