Responsiv Webdesign - Wie kann ich ein Smartphone erkennen?

Hallo!

Media Queries in CSS sind der richtige Ansatz. User-Agents sind quasi die Vorgänger-Technologie und sind/waren wirklich ätzend und fehleranfällig.
Die User-Agents solltest du also nur verwenden, wenn du einen wirklich guten Grund hast (davon gibt es manchmal noch welche, aber wirklich selten).

Zitat von Clapi

Nun haben aber die meisten Smartphones eine Full-HD Auflösung genauso wie mein 27" Bildschirm. Bald ist dort QHD der Standard also größer als viele ältere Bildschirme.

Du hast hier einen (kleinen) Denkfehler. Smartphones und Tablets haben zwar Displays mit Full-HD und QHD/WQHD, nutzen diese physikalische Größe des Displays aber nicht. Das wäre auch quatsch, weil dann alle Elemente winzig klein werden würden. Stattdessen wird einfach die Punktedichte erhöht, wodurch das Bild schärfer wird (das was Apple "Retina" nennt).
Dabei kannst du ungefähr davon ausgehen, dass FullHD eine Ratio von 2 und WHQD eine Ratio von 3 hat. Das heißt, am Ende haben die Geräte eigentlich eine effektive Breite von ca. 300 - 500px, womit du sie wieder wunderbar mit den Media-Queries "ansprechen" kannst.

Ich habe gerade mal fix gegoolt. Schau dir auch mal diesen Artikel an:
https://www.cubetech.ch/iphone-bildsch…kein-hexenwerk/

Da geht es zwar "nur" um iPhones, technisch gesehen lässt sich das aber auf jedes andere Mobil-Gerät so übertragen.

Kleine Ergänzung zu Daniels Beitrag:

Wenn du in einer WordPress Umgebung bist, kannst du außerdem mit wp_is_mobile explizit auf Mobilgeräte prüfen. Dies ist dann sinnvoll, wenn man z.B. einen Slider mitsamt Plugin CSS und JavaScript von Mobilgeräten ausschließen möchte. Die meisten Tablets werden ebenfalls als Mobilgeräte erkannt, es sei denn sie geben sich als Desktop Geräte aus.

Zitat von mkronenfeld

.. kannst du außerdem mit wp_is_mobile explizit auf Mobilgeräte prüfen...

Aber Vorsicht, die Nutzung eines Cache-Plugins in den üblichen Standardeinstellungen ist hiermit nicht möglich.

Das An-/ oder Abschalten von Features wie Slider o.ä. sollte ausschliesslich im Client erfolgen und nicht auf dem Server entschieden werden.

Am Rande: wp_is_mobile() macht nichts anderes, als auf einige User-Agent Fragmente zu prüfen.

Zitat von b3317133

Aber Vorsicht, die Nutzung eines Cache-Plugins in den üblichen Standardeinstellungen ist hiermit nicht möglich.

So ist es. Leider kenne ich keine bessere Methode, ungewollte Assets auf mobilen Seiten vom Download abzuhalten.

OT bzgl. ungewollte Assets:

1. Da ein "Production" Website sowieso minimized/combined JS/CSS mit entspr. Verbleib im Browser-Cache ausliefert (bzw. ausliefern sollte), ist es egal, ob da ein paar KB mehr oder weniger an JS/CSS mitkommen.

2. Wenn ein Slider auf display:none steht und per JS nicht initialisiert wird, stört er ebenfalls nicht weiter.

3. Auch sonstige Bilder werden bei entspr. Nutzung von srcset usw. automatisch nur in der entspr. Auflösung vom Client geladen.

Wenn man sehr grosse Unterschiede bei mobil/nicht-mobil hat, empfiehlt sich dann eher die Nutzung eines eigenen Themes unter einer entspr. Subdomain m.example.com o.ä.

TLDR: Nutzung von wp_is_mobile() im Frontend = nix gut.

Zitat von Clapi

Ich habe jetzt ein bisschen rumprobiert:
Damit ich auf meinem Smartphone die mobile Ansicht bekomme, muss ich max-with 990px benutzen.
Wenn man jetzt aber am PC sitzt und hat das Browserfenster auf der halben Bildschirmseite, hat man auch die mobile Ansicht. Gibt es da noch eine bessere Lösung?

Das du auf dem Desktop-Browser auch die mobile Ansicht siehst, wenn du das Browser-Fenster kleiner machst ist normal und auch so gewollt. Das ist bei allen Seiten so, wenn sie Responsive sind.

990px scheint mir aber viel zu hoch für ein Smartphone. Welches Smartphone verwendest du denn?

Zitat von Clapi

Sony Xperia Z Ultra

Es ist schon ein sehr großes Smartphone.

Ich finde da leider keine konkreten Angaben zur "tatsächlich" dargestellten Größe. Man könnte das jetzt zwar errechnen, aber ich sags mal so: Das sieht auf den Bildern schon groß aus und auch die Aulösung sieht recht groß aus. Das kann also theoretisch schon sein, dass das wirklich 990px Breite anzeigt.

Ich würde dir aber empfehlen, dieses Telefon aber nicht als Referenz nehmen, da das nicht gerade eine "gängige" Größe für ein Smartphone ist.

Zitat von Clapi

Allerdings sehe ich alle anderen Seiten darauf auch in der mobilen Ansicht, also müssen die ja dann auch diesen Wert genommen haben?

Bei Media Queries unter 980px nimmt mein Sony die Desktopvariante.

Woran machst du denn Fest, dass es die "mobile Ansicht" ist? Es gibt beim Responsive Webdesign genau genommen keine Mobil- oder Desktop-Ansicht.
Eigentlich ist das Ziel, dass die Seite in jeder Auflösung problemlos und "vernünftig" dargestellt wird. Das heißt, egal ob dein Smartphone 300px anzeigt oder dein Desktop-Monitor 1920px, es sollte für beide optimiert sein und vor allem auch für jede(!) Zwischengröße.

Dementsprechend siehst du auf deinem Xperia Ultra vermutlich etwas anders, als jemand mit einem iPhone. Aber (wenn es richtig gemacht ist) ist das am Ende egal...

Hallo Clapi

Du hast leider vollkommen falsche Vorstellungen wie Responsive Layout funktioniert, was es kann, was es nicht kann und auch nicht können muss.

Du musst dich von deinem 2-Stufen-Modell lösen. Wie schon geschrieben gibt es nicht den Unterschied zwischen mobiler und Desktop-Version. Aus dem Gefängnis musst du dich befreien. Das Responsive Design dient dazu auf jeder Bildschirmgröße, vollkommen unabhängig vom Gerät, eine möglichst benutzerfreundliche Darstellung zu erreichen. Und heutzutage gibt es unzählig viele Geräte mit unterschiedlichen Bildschirmgrößen und dazu noch unterschiedlichen Auflösungen - und "täglich" kommen neue hinzu. Das schöne ist, dass du dir bei einem richtig erstellten Responsive Layout keine Gedanken über neue Geräte machen musst - die Webseite funktioniert auch auf denen.

Mit deiner starren Unterscheidung von nur zwei Varianten bist du deshalb auf der Verliererstraße. Das kann schlicht nicht funktionieren. Dein Denkansatz ist also bereits falsch, den musst du ändern.

Es funktioniert nicht zunächst zwei, oder großzügig auch drei, Breakpoints ohne jeden Bezug zur Seite vorzugeben und danach die ganze Seite auszurichten.

Im Gegenteil muss zunächt die Seite mit Inhalt erstellt werden und dann wird geschaut, welche Elemente wann einen Breakpoint benötigen. Das ist im Endeffekt auch vom Arbeitsaufwand her viel vorteilhafter.

Gruss

MrMurphy