Moderne Abfrage für Desktop/Tablet/Mobile-Ansicht?

[Turrican101]

Bisher hat man mobile Websites immer per responsive Webdesign gemacht, wo man die Auflösung abgefragt hat und demnach mit MediaQueries die verschiedenen Layouts zugewiesen hat. Aber mittlerweile ist das ja gar nicht mehr ordentlich möglich, da man nicht mehr einfach sagen kann "hohe Auflösung = Desktop, niedrige = Smartphone". Heute kann ich ja FullHD nehmen und trotzdem kann der Betrachter vor nem 24"er sitzen oder ein kleines Smartphone in der Hand halten.

Mich störts vor allem, dass man irgendwie nicht zwischen Tablets und Smartphones unterscheiden kann. Ich würde am liebsten Tablets, bzw. alles ab 7" die Desktopversion einer Seite zuordnen und allem darunter die Smartphoneversion. Nur wie macht man das? Bzw. geht das überhaupt (einfach)?

Manche Seiten fragen einen beim Aufruf von mobilen Geräten ja, ob man die Desktopversion oder die mobile Version laden will, wenn man mit nem Smartphone draufgeht. Wie wird das eigentlich gemacht? Das würde so ja schonmal weiterhelfen. Z.B. Focus.de macht sowas ja, aber da bin ich irgendwie noch nicht hintergestiegen wie das da abläuft.

 

[dominic.e]

Wird das nicht über den User-Agent gesteuert? bzw, kannste das nicht über den User-Agent machen?

 

[nico525]

Wer suchet, der findet auch...

Hier ein Auszug aus dem Quelltext von focus.de:

        this.mobileConfirmCheck = $.cookie("mobile_chk_008");
        if (this.mobileConfirmCheck <= 0) {
            if ((navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/Mobile/i)) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/Opera Mobi/i) || navigator.userAgent.match(/Opera Mini/i)) {

Es wird also wohl so wie von dominic.e angesprochen abgefragt

 

[skmCry]

Gibt da verschiedene Möglichkeiten, eine davon ist eine Abfrage über eine WURFL-Datenbank:
http://en.wikipedia.org/wiki/WURFL
http://windowsdeveloper.de/artikel/Mobile-Geräte-mit-WURFL-erkennen
http://wurfl.sourceforge.net/

Edit:
Die obigen Antworten bezüglich des User-Agent sind auch korrekt.

 

[Turrican101]

Also muss ich da dann aber auch die Agents immer aktuell halten, weil ja immer wieder Firmen neue Geräte mit anderen Agents erfinden? Also so wie bei den Queries scheint das da wohl nicht zu gehen, da guckt der ja einfach nur nach "Mobile ja/nein", ohne das Gerät kennen zu müssen oder dass man was extra machen muss.

@nico: Wo steht deine Passage denn da im Quelltext drin? Bei mir gibts den Teil gar nicht.

Bisher kenne ich das auch eher mit Weiterleitungen oder Themeswitcher aber mir würds reichen, dass es ne normale Desktopversion gibt, auf Tablets/Smartphones ne Abfrage kommt und wenn der User auf "mobile Version" klickt wird dann ne zweite CSS-Datei geladen, wo die Anpassungen an die mobile Version dann noch mit reinkommen. Müsste ich dann einfach nur die Abfrage von oben nehmen und den in dem Fall dann die zweite CSS laden lassen (nach der ersten natürlich)?

 

[nico525]

http://www.focus.de/resources/1395822417238-4/ver1-0/js/fol.min.js

Zeile 18449, wenn ich es mir im inspector angucke (decompressed)


Das mit der CSS nachladen könntest du so machen, oder du änderst den Link der Desktop CSS auf die Mobile CSS

Alles in allem ist es natürlich keine schöne Lösung, aber zurzeit eine der einzig mir bekannten brauchbaren Lösung...

 

[Turrican101]

Wie mach ichn das am besten? Momentan find ich nur Lösungen, die entweder per Auflösung ne CSS zuweisen (was ja blöd ist) oder welche, die per JS/PHP/etc den Agent auslesen und nen Redirect machen (nen Redirect will ich aber nicht). Ich will aber eben ne Mischung aus beidem, hab aber von JS/PHP keinen Plan.

Also
- Abfrage ob mobiles Gerät
- Auswahl "wollen sie normale oder mobile Seite?"
- wenn mobil, dann lade "mobil.css" wo dann halt im Prinzip das drinsteht, was ich sonst generell per Mediaquery für kleine Auflösungen benutzt hab und das Layout eben in die mobile Variante ändert

 

[ice-breaker]

Mit den Full-HD-Smartphones hast du gar kein Problem Denn für Webseiten nutzen die nicht ihre volle Auflösung, dann könnte nämlich niemand mehr etwas lesen.

Das Galaxy S4 meldet sich z.B. als Smartphone mit u. a. der Größe 640x320 und einem PixelRatio=3, die Full-HD-Auflösung wird also nur genutzt damit die Anzeige schärfer gemacht werden kann.

 

[Turrican101]

Mir gehts auch eher darum, die Tablets von den Smartphones unterscheiden zu können. Denn die müssen ja nicht unbedingt ne mobile Version bekommen, da es nicht jeder toll findet auf nem 11" Tablet ne Website mit riesiger Schrift und Aufklappmenü hinter nem Button nutzen zu müssen. Aber mit Mediaqueries alleine geht das halt nicht, da kann ich eben nur auf die Auflösung auslesen und danach zuweisen.

Daher will ich dem mobilen Nutzer die Wahl lassen was er will, was zudem gut ist, wenn die mobile Variante evtl weniger Daten benötigt und jemand unterwegs auf sein Volumen achten will.

 

[nico525]

wie wäre es mit bspw

$("head").append($("<link rel='stylesheet' href='mobile.css' type='text/css'>"));

um eine neue CSS-Datei hinzuzufügen? Ich habe nicht getestet, ob das dynamisch funktioniert, aber da die Abfrage beim load gemacht werden sollte, dürfte das egal sein?


EDIT: natürlich nur, wenn jquery zur Verfügung steht. Ansonsten musst du auf einfaches JS zurückgreifen.

 

[Turrican101]

Hm würde denke ich hinhauen, nur fällt mir gerade ein, dass sich der Browser das ja merken muss, sonst kommt ja bei jedem Klick im Menü wieder ne Abfrage. Daher nehmen die meisten wohl den Umweg über 2 Themes und ne Subdomain für Mobile.
Sonst müsste man das noch mit Cookies erweitern...

 

[nico525]

Ja, da bleibt dir wohl kaum eine andere Wahl. Entweder machst du das über Cookies (siehe Codeausschnitt von Focus), oder du lädst die Inhalte der Seite ohnehin nur per AJAX nach. Es dürfte dabei auch ein geringerer Datenverbrauch entstehen, wenn nur die Inhalte geladen werden müssen (die Navigation muss bspw nicht nach jedem Link neu heruntergeladen werden).
Darüber hinaus finde ich es ganz angenehm, wenn ich zwischenzeitlich nicht einen komplett weißen Bildschirm zu sehen bekomme. Youtube macht dies ganz chic wie ich finde

 

[max_1234]

Wenn du die Startseite mit PHP zusammenbastelst kannst du das ja in die Session schreiben ...

Die Problematik mit den Dumpphones und Schneidebrettern ist bekannt, jeder Webmaster entwickelt hierfür seine eigene Lösung.
Es bleibt nur die Frage: Wieviel willst du machen?
Garnix? - CMS
Wenig? - Seite für Mobile und Dekstop, Abfrage und Redirekt mit JS
Viel? - Seite für Mobile, Tablets und Desktops, Abfrage und Redirekt mit JS

Generell gilt folgendes:
Desktop-Auflösung ab 1024*768 UND immer horizontal (länge > höhe)
Tablet-AUflösung unter 1024*768, meistens horizontal - manchmal vertikal *gap*
Smartphone-Auflösung unter 1024*768, höhe > länge (auch wenn gekippt) *gap*

Die *gaps* kannst du mit Abfragen der User-Agents füllen, dann weißt du es genau.

mfg,
Max