Ich suche nach dem perfekten Weg, Tabletten zu erkennen. Bei Medienabfragen können Sie Min- und Max-Breiten für bestimmte CSS festlegen. Aber es gibt Tablets, die höhere Auflösungen haben als Soms Desktop-Monitore. Das wird einen Konflikt verursachen.
Mit Javascript (Modernizr, Detectivizr) werden Tablets erkannt und setzt dies im HTML mit einer Klasse "tablet" auf dem HTML-Tag. Aber ... Nicht alle Benutzer haben Javascript aktiviert.
Was Sie also wollen, ist (meiner Meinung nach) CSS, um Tablets zu erkennen. Kennt jemand die perfekte Lösung dafür?
Danke im Voraus!
Sie können mit CSS-Medienabfragen eine angemessene Genauigkeit erzielen:
%Vor%Das oben genannte sollte erkennen, wenn die Bildschirmgröße des Geräts weniger als 1024 x 768 (eine allgemeine Bildschirmgröße für Desktops) ist.
Wie Sie oben gesagt haben, ist es nicht perfekt, wenn Sie nur CSS verwenden, da einige Tablets eine Bildschirmgröße von mehr als 1024x768 haben.
Der einzige Weg, den ich kenne, um die Genauigkeit zu erhöhen, besteht darin, JavaScript zu verwenden, um die userAgent -Zeichenfolge zu erkennen. Siehe die Frage, die GeenHenk verlinkt hat ( Was ist der beste Weg, um eine Mobilgerät in jQuery? ).
Beantworten Sie diesen Link , um detaillierte Informationen dazu zu erhalten Identifizieren Sie verschiedene Geräte.
Was ist mit der Verwendung von mobile-detect.js ? Ich habe es nur für mein Projekt verwendet - es ist nett .tablet() Methode.
UPDATE (für maxshuty)
Ich benutze es auf folgende Weise:
%Vor% Sie können gegen die navigator.userAgent , aber ihr JavaScript, wie folgt überprüfen:
Ich habe das gefunden:
%Vor%Dies scheint zu erkennen, ob die Breite des Browsers die Größe eines Smartphones hat.
Siehe die Antworten in diese Frage für weitere Informationen