it-swarm.com.de

Mit Modernizr auf Tablet und Handy testen - Meinungen erwünscht

Ich möchte mit Modernizr ermitteln, ob ein Benutzer eine Site auf einem Desktop, Tablet oder Mobilgerät anzeigt.

Meine ersten Gedanken sind natürlich, die Bildschirmgröße zu überprüfen, die für mobile Geräte und auch für größere Desktops ausreichen sollte. Bei Tablet-Geräten, bei denen die Bildschirmgröße auch der eines kleinen Desktop-Bildschirms (1024 x 768) entsprechen könnte, würde ich auch auf Berührungsereignisse testen.

Zu diesem Zeitpunkt möchte ich mich auf mobile/Tablet-Geräte konzentrieren, die, wie jQuery mobile sagt, A-Grade sind. Ich möchte keine spezifischen Funktionen für Mobilgeräte nutzen, sondern nur Desktop, Tablet oder Mobile erkennen und je nach Testergebnissen eine maßgeschneiderte Benutzeroberfläche bereitstellen, indem ich CSS-Klassen anhänge.

Denken Sie, dass dies ausreicht, um das zu erreichen, was ich möchte, oder denken Sie, dass ich auf andere Fähigkeiten testen sollte? Vielen Dank im Voraus.

39
mtwallet

Modernizr kann nach Berührungsereignissen suchen

Um zu testen, ob es sich bei dem Gerät um ein Tablet, ein Telefon oder einen Desktop handelt, würde ich wahrscheinlich eher User Agents verwenden. Schauen Sie sich die Skripte auf DetectMobileBrowsers.com an

Modernizr prüft lediglich, ob ein Browser bestimmte Funktionen unterstützt. Soweit ich weiß, scheint es nicht zu testen browser_type == mobile und solche Sachen ...

Denken Sie daran, dass viele moderne Desktop-PCs heutzutage über Touchscreens verfügen. Selbst die Erkennung von Touchscreens garantiert nicht, dass es sich um mobile Geräte oder Tablets handelt.

38
Jake Wilson

Diese Frage ist ein bisschen alt, aber ich konnte keine bessere Antwort finden, als ich sie gegoogelt habe.

Die meisten Desktops sind jetzt berührungsaktiviert, sodass die Erkennung irrelevant ist.

Sie lassen sich am besten anhand der Bildschirmgröße erkennen.

Mit Modernizr können Sie if (Modernizr.mq('only all and (max-width: 480px)')) { ...} verwenden.

46

Sie können die folgende Erweiterung für Modernizr verwenden: https://www.npmjs.org/package/mobile-detect

Oder (ohne Modernizr) können Sie Restive.JS verwenden, um Ihrem Körper eine ".phone" - oder ".tablet" -Klasse hinzuzufügen: http://docs.restivejs.com

(Suchen Sie unten auf der Seite nach "Formfaktor".)

4
tFranz