mobile-detect om desktop te detecteren

Het kan voorkomen dat je een desktop website bezoekers iets anders wilt laten ervaren dan mobiele en tablet bezoekers. Het unieke aan een desktop tegenover de rest van de devices met een webbrowser is en blijft de muis. Hier is de Javascript bibliotheek mobile-detect een goede oplossing voor.

Door de muis over het scherm te bewegen kunnen er diverse acties worden gedaan door een van de triggers; denk aan de muis ergens overheen gaan, maar ook muis een gebied binnen laten gaan en een gebied uit laten gaan (mouseenter, mouseexit) kan iets starten.

Een responsive website wil je soms niet vertrouwen op scherm resoluties, die met javascript snel op te vragen zijn, om te bepalen of iets een desktop is of niet. Vaak wordt aangenomen dat een breedte boven 1024 pixels een dekstop is; maar als er morgen een iPad komt met 1600 of 2048 pixels breedte resolutie, die gelijk als dekstop wordt beschouwd.

mobile-detect gebruiken

Om toch op te kunnen vragen of af te kunnen vangen of iets mobiel is of niet, kun je kiezen om mobile-detect te gebruiken. Deze biblotheek kan ook in combinatie met Modenizr worden gebruikt. De combinatie maakt het mogelijk om enkele classes toe te voegen aan de body tag van de webpagina en daarmee in CSS aanpassingen te doen op basis van het device van de bezoeker.

Bronnen: http://hgoebl.github.io/mobile-detect.js/

Reactions