web-dev-qa-db-de.com

Ermitteln Sie, ob ein Browser in einem mobilen Gerät (iOS / Android-Telefon / Tablet) verwendet wird

Gibt es eine Möglichkeit, festzustellen, ob ein Handheld-Browser verwendet wird (iOS/Android-Telefon/Tablet)?

Ich habe dies mit dem Ziel versucht, ein Element in einem Browser auf einem Handheld-Gerät halb so breit zu machen, aber es macht keinen Unterschied.

width: 600px;
@media handheld { width: 300px; }

Kann es gemacht werden und wenn ja wie?

edit: Von der angegebenen Seite in jmaes 'Antwort habe ich verwendet

@media only screen and (max-device-width: 480px).

40
seron

Update (Juni 2016) : Ich versuche nun, bei jeder Auflösung die Eingabe per Touch und Maus zu unterstützen, da die Gerätelandschaft die Grenzen zwischen den Dingen langsam verwischt und sind keine Touch-Geräte. iPad-Profis sind nur mit der Auflösung eines 13-Zoll-Laptops touchfähig. Windows-Laptops sind jetzt häufig mit Touchscreens ausgestattet.

Andere ähnliche SO Antworten (siehe andere Antworten auf diese Frage) haben möglicherweise andere Möglichkeiten, um herauszufinden, welche Art von Gerät der Benutzer verwendet, aber keine davon ist narrensicher. Ich empfehle Sie können diese Antworten überprüfen, wenn Sie unbedingt versuchen müssen, das Gerät zu bestimmen.


zum einen ignorieren iPhones die Abfrage handheld ( Source ). Und ich wäre nicht überrascht, wenn auch andere Smartphones dies aus ähnlichen Gründen tun würden.

Die derzeit beste Methode zum Erkennen eines Mobilgeräts besteht darin, dessen Breite zu kennen und es mit entsprechende Medienabfrage abzufangen. Dieser Link listet einige beliebte auf. Ich bin sicher, eine schnelle Google-Suche würde Ihnen alle anderen liefern, die Sie benötigen.

Weitere iPhone-spezifische (z. B. Retina-Display) finden Sie unter dem ersten Link, den ich gepostet habe.

28
jamesplease

Mobile Geräte erkennen

Zugehörige Antwort: https://stackoverflow.com/a/13805337/1306809

Es gibt keinen einzigen Ansatz, der wirklich narrensicher ist. Am besten kombinieren Sie verschiedene Tricks nach Bedarf, um die Chancen zu erhöhen, eine größere Auswahl an Handheld-Geräten erfolgreich zu erkennen. Unter dem obigen Link finden Sie einige verschiedene Optionen.

8
Matt Coughlin

So habe ich es gemacht:

@media (pointer:none), (pointer:coarse) {
}

Basierend auf https://stackoverflow.com/a/42835826/1365066

8
GrayFace

Erkennen Sie keine mobilen Geräte, sondern setzen Sie stattdessen auf stationäre Geräte.

Heutzutage (2016) gibt es eine Möglichkeit, Punkte pro Zoll/cm/px zu erkennen, die in den meisten modernen Browsern zu funktionieren scheint (siehe http://caniuse.com/#feat=css-media-resolution ). Ich brauchte eine Methode, um zwischen einem relativ kleinen Bildschirm, bei dem die Ausrichtung keine Rolle spielte, und einem stationären Computermonitor zu unterscheiden.

Da dies von vielen mobilen Browsern nicht unterstützt wird, kann der allgemeine CSS-Code für alle Fälle geschrieben und diese Ausnahme für große Bildschirme verwendet werden:

@media (max-resolution: 1dppx) {
    /* ... */
}

Beide Windows XP und 7 haben die Standardeinstellung von 1 Punkt pro Pixel (oder 96 dpi). Ich kenne keine anderen Betriebssysteme, aber das funktioniert wirklich gut für meine Bedürfnisse.

Bearbeiten: dppx scheint in Internet Explorer nicht zu funktionieren. Verwenden Sie stattdessen (96) dpi.

7
LGT

Ich weiß, dass dies ein alter Thread ist, aber ich dachte, das könnte jemandem helfen:

Mobile Geräte haben eine größere Höhe als Breite, Computer dagegen eine größere Breite als Höhe. Beispielsweise:

@media all and (max-width: 320px) and (min-height: 320px)

das müsste also wohl für jede breite gemacht werden.

2
m33x

Ich glaube, dass eine viel zuverlässigere Methode zum Erkennen mobiler Geräte darin besteht, die Zeichenfolge navigator.userAgent zu lesen. Auf meinem iPhone lautet die Zeichenfolge des Benutzeragenten beispielsweise:

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 wie Mac OS X) AppleWebKit/603.2.4 (KHTML wie Gecko) Version/10.0 Mobile/14F89 Safari/602.1

Beachten Sie, dass diese Zeichenfolge zwei verräterische Schlüsselwörter enthält: iPhone und Mobile. Andere User-Agent-Zeichenfolgen für Geräte, die ich nicht habe, finden Sie unter:

https://deviceatlas.com/blog/list-of-user-agent-strings

Mit dieser Zeichenfolge setze ich eine JavaScript-Boolesche Variable bMobile auf meiner Website mit dem folgenden Code auf "true" oder "false":

var bMobile =   // will be true if running on a mobile device
  navigator.userAgent.indexOf( "Mobile" ) !== -1 || 
  navigator.userAgent.indexOf( "iPhone" ) !== -1 || 
  navigator.userAgent.indexOf( "Android" ) !== -1 || 
  navigator.userAgent.indexOf( "Windows Phone" ) !== -1 ;
2
Jesse Heines