Ich zeige eine Benachrichtigungsleiste auf meiner Website, und ehrlich gesagt, es funktioniert nicht gut, wenn es auf einem mobilen Gerät ist. Ich möchte die Leiste NUR für Desktop-Benutzer anzeigen.Einfachster Weg zu bestimmen, ob der Benutzer auf dem mobilen Gerät ist
Was ist der einfachste Weg festzustellen, ob sich ein Benutzer auf dem Desktop oder auf dem Handy befindet?
prüfen diese http://detectmobilebrowsers.com/
Arbeit für Javascript, jQuery usw.
Der angegebene Code von dem Link funktioniert perfekt für mich in einer ASP.net-Website. –
Ein Check-User-Agent ist die „einfachste“, obwohl man leicht CSS3 media queries
Hier beschäftigen könnte ein Beispiel ist, das iphone prüft, Android und Blackberry; Sie können problemlos andere mobile Browser hinzufügen.
var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
Nun, ich habe nicht downvote (es sieht so aus, als ob niemand jetzt ...), aber Ihr regulärer Ausdruck ist ein wenig spärlich. – Pointy
Fair genug, ich habe nicht versucht, alle mobilen Browser abzudecken, nur ein Beispiel dafür, wie es gemacht werden kann. Ich hätte das wohl sagen sollen. –
@ Pointy sehr. Ich habe es beispielsweise nicht für Windows Phone versucht. Vielleicht ist die Medienabfrage die beste, da jeder Browser es seit Tagen implementiert. –
finde ich, dass es am besten Feature-Erkennung. Verwenden Sie Modernizr, um zu erkennen, ob es sich um ein Touch-Gerät handelt. Sie können Dinge wie:
var mousedown = 'mousedown';
if (Modernizr.touch) {
mousedown = 'touchstart';
}
$('.foo').on(mousedown, handleMouseDown);
Und dann CSS Media Queries verwenden Bildschirmbreite für den Umgang mit (und es ist auch einfach, Bildschirmbreite mit Javascript zu erkennen). Auf diese Weise können Sie Touch-Geräte mit großen Bildschirmen oder Nicht-Touch-Geräte mit kleinen Bildschirmen korrekt handhaben.
...und Sie können Elemente mit CSS verbergen/anzeigen/ändern, weil Modernizr die Klasse "touch" zum Element "" für Touch-Geräte hinzufügt. Also, '.touch #notificationBar {display: none; } '... – Pointy
Wenn Sie modernizr verwenden. Eine "no-touch" -Klasse wird dem Element hinzugefügt. Sie können die Leiste standardmäßig ausblenden und eine CSS-Regel hinzufügen, um die Leiste anzuzeigen, wenn die Klasse "no-touch" existiert. Beispiel:
default:
.bar{display:none;}
Desktop:
.no-touch .bar{display:block;}
das nicht mehr optimal sein kann, da es Touch-Geräte gibt, die nicht explizit mobil sind -> siehe Surfpro (um fair zu sein, kann es ein Tablet sein, das mobil ist), Laptops wie Lenovo usw. berühren und Ich bin mir sicher, dass eine ganze Reihe neuer Touch-Geräte auf den Markt kommen werden – Daemedeor
Ich glaube, Sie Medienanfragen verwenden sollten tatsächliche Fähigkeit anstelle von User-Agents, um bestimmen sollte Fähigkeit zu bestimmen. –
Da ist wirklich keiner. Sie sollten herausfinden, * warum * es nicht funktioniert (welche Funktion fehlt Handys) und verwenden Feature-Erkennung und Media-Abfragen, um zu bestimmen, ob es angezeigt werden soll oder nicht. – Chad
anstatt Handy oder Desktop zu erkennen, denke ich, in Ihrem Szenario macht es mehr Sinn, Bildschirmauflösung zu erkennen. – lbstr