CSS-Medienabfragen: Ziel-Mobilgeräte ohne Angabe von Breite, Pixelverhältnis usw.

Question

Nehmen wir an, ich möchte nur jedes Tablet und Telefon ansprechen, unabhängig von der Größe. Gibt es dafür eine Medienabfrage?Ist dies ohne Angabe einer Größe möglich?Oder ist die Verwendung einer Größe die einzige Möglichkeit, auf mobile Geräte und nicht auf Desktops abzuzielen?

Answer 1

In der CSS3-Spezifikation wird @media handeld erwähnt, der jedoch möglicherweise keine Browserunterstützung bietet.

Also nein.

Möglicherweise finden Sie diese Site jedoch nützlich. Sie erklärt andere MedienabfragenTechniken für mobile.

Answer 2

Ich habe seit einigen Tagen damit zu kämpfen, aber eine gute Möglichkeit, nach Handheld-Geräten zu suchen, ist die maximale Gerätebreite.Desktop-PCs senden dies nicht an den Browser, aber die meisten (wenn nicht alle) Handhelds verwenden dies.

In meinem Fall wollte ich eine komprimierte Version der Site auf allen Geräten (einschließlich Desktop) unterhalb einer bestimmten Breite anzeigen, für die ich verwendet habe

@media all and (max-width: 640px)

Ein bestimmtes Overlay-Popup, das position: fixed verwendete, musste jedoch nur auf Handhelds geändert werden (da die CSS-Eigenschaft in allen Desktop-Browsern, jedoch nicht auf allen Handhelds funktioniert).Deshalb habe ich eine zusätzliche Regel verwendet:

@media all and (max-device-width: 640px)

In dem ich alle Handhelds unter 640, aber keine Desktop-Browser anvisiere.Dies gilt übrigens auch nicht für iPads (wie ich es wollte), da es eine höhere Gerätebreite als 640px hat.

Wenn Sie nur auf alle Geräte abzielen möchten, wählen Sie einfach eine geringe Mindestbreite (1 Pixel), damit kein Gerät unabhängig von der Breite ausgeschlossen wird.

Answer 3

Ich glaube nicht, dass Sie mit einem reinen CSS-Ansatz zu viel Glück haben werden.Sie sollten etwas in Anlehnung an den Ansatz von modernizer.js und uns JS tun, um das Gerät zu erkennen und darauf basierend einen Klassennamen an den Body anzuhängen.

Was ist der beste Weg?um ein mobiles Gerät in jQuery zu erkennen?

Nehmen Sie diese Klasse dann in Ihre Medienabfragen für spezielle Mobilgeräte unterschiedlicher Größe auf.