Prüfen ob am Handy aufgerufen?

[n0va]

Hi,

ich würde gerne wissen, wie ich prüfen kann, ob eine Webseite am Browser oder an einem Handy aufgerufen wird.
Es muss soll keine dynamische Seitenbreite sein, d.h. bei Veränderung der Seitenbreite soll die Seite sich nicht verändern.

Simpel ausgedrückt besteht das Grundgerüst der Seite aus einer datenbankgestützten Tabelle, mit 3 Spalten. Wenn die Seite am Handy aufgerufen wird, soll es lediglich 1 Spalte pro Zeile sein, d.h. die anderen 2 Spalten werden dann quasi zu neuen Zeilen.
Das ist ja machbar.

Ich würde nur gerne wissen, wie ich das prüfen kann.
Quasi via PHP ein if(device=smartphone/tablet){mobile=1] - die Richtung quasi.

Auch der Header soll dann abgespeckter sein.

Kann mir jemand Anstöße geben?

lg

 

[scbawik]

Hi,

ich würde gerne wissen, wie ich prüfen kann, ob eine Webseite am Browser oder an einem Handy aufgerufen wird.
Es muss soll keine dynamische Seitenbreite sein, d.h. bei Veränderung der Seitenbreite soll die Seite sich nicht verändern.

Simpel ausgedrückt besteht das Grundgerüst der Seite aus einer datenbankgestützten Tabelle, mit 3 Spalten. Wenn die Seite am Handy aufgerufen wird, soll es lediglich 1 Spalte pro Zeile sein, d.h. die anderen 2 Spalten werden dann quasi zu neuen Zeilen.
Das ist ja machbar.

Ich würde nur gerne wissen, wie ich das prüfen kann.
Quasi via PHP ein if(device=smartphone/tablet){mobile=1] - die Richtung quasi.

Auch der Header soll dann abgespeckter sein.

Kann mir jemand Anstöße geben?

lg

Gut: CSS Media Queries
Schlecht: Alle anderen Lösungen - wie zB User Agent Test.
Also: PHP ist für dein Vorhaben nicht geeignet.

 

[Alex55]

https://github.com/cbschuld/Browser.php
http://mobiledetect.net/
maybe

 

[pax]

Ich muss scbawik da widersprechen. Wenn die Liste der überprüften Useragents aktuell gehalten wird, ist die Abfrage darüber deutlich präziser und erlaubt auch, auf Gerätebesonderheiten zu reagieren. Mit mobiledetect (siehe Alex55) hab ich da sehr gute Erfahrungen gemacht.

 

[scbawik]

Ich muss scbawik da widersprechen. Wenn die Liste der überprüften Useragents aktuell gehalten wird, ist die Abfrage darüber deutlich präziser und erlaubt auch, auf Gerätebesonderheiten zu reagieren. Mit mobiledetect (siehe Alex55) hab ich da sehr gute Erfahrungen gemacht.

Auch wenn du mir widersprichst: Es ändert nichts daran dass Media Queries die gute Lösung sind, UA-Abfrage die schlechte.
Stichworte: Trennung Programmlogik/Optik.

Eine UA-Abfrage zählt zur Programmlogik, Media Queries sind einfach nur optische Definitionen.

Präzision ist kein Argument. 1000px sind 1000px - da gibt es keinen Spielraum - auch nicht in CSS.

Wenn man auf Gerätebesonderheiten eingehen muss, sind das entweder absolute Ausnahmesituationen oder man hat nicht Cross-platform-kompatibel programmiert. Oder umgehst du jedes CSS Problem auch mit JS anstatt es an der Wurzel (mit CSS) zu lösen?

Die Optik einer Website sollte sich nach dem verfügbaren Viewport richten, nicht nach dem auszugebenden Gerät.

 

[pax]

Das war doch aber nicht der Kern der Frage.

ich würde gerne wissen, wie ich prüfen kann, ob eine Webseite am Browser oder an einem Handy aufgerufen wird.

Das geht eben nicht mit Media Queries.

Wenn man auf Gerätebesonderheiten eingehen muss, sind das entweder absolute Ausnahmesituationen oder man hat nicht Cross-platform-kompatibel programmiert.

Gut, ich lerne gern dazu. Ein Beispiel:
Ich möchte für die mobile Ansicht einer Seite einen Slider bauen, der auf Swipe reagiert. Um das swipen sauber abzufragen muss ich für dieses Touchevent "event.stopPropagation" im Javascript benutzen um das Standardverhalten des Gerätes für diesen Fall zu unterdrücken. Der Internetexplorer in allen Versionen kennt diese Javascript Funktion aber nicht, dort braucht es statt dessen eine css Property "ms-touch-action", also eine völlig andere Herangehensweise.
Jetzt erklär mir bitte, wie ich das ordentlich "Cross-platform-kompatibel" programmiere, ohne den Useragent abzufragen.

Von diesen Beispielen gibt es viele. Mobile Browser verhalten sich noch immer derartig unterschiedlich, dass man in sehr vielen Fällen Speziallösungen braucht, wenn man mehr will als ein Bootstrap Grid und versucht, mit seinen mobilen Ansichten möglichst nah ans App-Feeling zu kommen. Zumindestens ist das meine Erfahrung.

 

[scbawik]

Gut, ich lerne gern dazu. Ein Beispiel:
Ich möchte für die mobile Ansicht einer Seite einen Slider bauen, der auf Swipe reagiert. Um das swipen sauber abzufragen muss ich für dieses Touchevent "event.stopPropagation" im Javascript benutzen um das Standardverhalten des Gerätes für diesen Fall zu unterdrücken. Der Internetexplorer in allen Versionen kennt diese Javascript Funktion aber nicht, dort braucht es statt dessen eine css Property "ms-touch-action", also eine völlig andere Herangehensweise.
Jetzt erklär mir bitte, wie ich das ordentlich "Cross-platform-kompatibel" programmiere, ohne den Useragent abzufragen.

Von diesen Beispielen gibt es viele. Mobile Browser verhalten sich noch immer derartig unterschiedlich, dass man in sehr vielen Fällen Speziallösungen braucht, wenn man mehr will als ein Bootstrap Grid und versucht, mit seinen mobilen Ansichten möglichst nah ans App-Feeling zu kommen. Zumindestens ist das meine Erfahrung.

Für nahezu alles gibt es Cross-platform kompatible Libraries (jQuery nur mal als Beispiel).
Diese prüfen nicht die Useragents, sondern ob ein Feature wie zB event.stopPropagation vorhanden ist.
Wenn nicht, wird einfach etwas anderes ausgeführt, was zum selben Ergebnis führt.
Dafür braucht man aber keine unendlichen Listen von UA samt deren Features, sondern ein einfaches if-else:

if(event.stopPropagation) { // default
  event.stopPropagation();
} else event.returnValue = false; // fallback

Wenn du selber solche Libraries schreibst, dann musst du diese natürlich mit entsprechenden Fallbacks ausstatten - sonst sind sie eben nicht Cross-plattform-kompatibel programmiert.

Das war doch aber nicht der Kern der Frage.

Auch nur weil der TE selbst nicht weiß nach was er fragen soll.
Media queries sind für das "abspecken des Headers" sowie ein dynamisches Grid die beste Lösung.

 

[pax]

Media queries sind für das "abspecken des Headers" sowie ein dynamisches Grid die beste Lösung.

Das eine schließt das andere doch nicht aus. Natürlich nutzt man die Mediaqueries trotzdem. Ich verstehe nicht, was dich mit beinahe religiöser Inbrunst so gegen die Abfrage des Useragents aufbringt. Mobiledetect gibt es seit vielen Jahren und wurde hundertausende Male heruntergeladen. Haben die alle keine Ahnung oder was?!

 

[scbawik]

Das eine schließt das andere doch nicht aus. Natürlich nutzt man die Mediaqueries trotzdem.

Ach ich bitte dich. Du hast meine Antwort eingangs als falsch deklariert, nicht umgekehrt.

Ich verstehe nicht, was dich mit beinahe religiöser Inbrunst so gegen die Abfrage des Useragents aufbringt.

Muss ich das echt noch mal erklären -.-
Das hat nichts mit Religion zu tun, das ist ein ungeschriebenes Gesetz. Für optische Anpassungen nimmt man einfach nicht den Useragent als Orientierung sondern den verfügbaren Browser-Viewport.
Und um nichts anderes als optische Anpassungen für mobile Devices ging es hier. Wer da mit UA-queries auftaucht, hat einfach irgendwas falsch verstanden.

Mobiledetect gibt es seit vielen Jahren und wurde hundertausende Male heruntergeladen. Haben die alle keine Ahnung oder was?!

Ich behaupte 90% inkl. dir haben keine Ahnung bzw. wussten das nicht anders zu lösen.

 

[pax]

Eigentlich ist nun genug diskutiert, aber da du im letzten Satz noch persönlich wirst, hab ich auch noch ein paar letzte Worte.

ich würde gerne wissen, wie ich prüfen kann, ob eine Webseite am Browser oder an einem Handy aufgerufen wird.
Es muss soll keine dynamische Seitenbreite sein, d.h. bei Veränderung der Seitenbreite soll die Seite sich nicht verändern.

Der TS hat hier klar definiert was er will. Er will NICHT den Viewport wissen, sondern den Device Type. Er hat eine TABELLE und will an das Device angepasstes Markup ausliefern. Dass du das anders machen würdest kann ich nachvollziehen, aber dass du dem TS unterstellst, er wüsste nicht was er fragen soll, ist ziemlich abgehoben.

Im Übrigen gibt es deutlich mehr als Layout. Manche Auftraggeber wollen ausdrücklich unterschiedliche Funktionalitäten zum Beispiel für die Navigation, welcher Content dargestellt wird usw. Das unterscheidet sich häufig auch zwischen Phone und Tablet. Am Viewport sind die längst nicht mehr auseinander zu halten. Aber vielleicht bekommen ja nur die 90% Ahnungslosen solche Aufgaben während die Elite mit 12-Spalten-Standard-Grid jedes Problem lösen kann.

 

[scbawik]

Eigentlich ist nun genug diskutiert, aber da du im letzten Satz noch persönlich wirst, hab ich auch noch ein paar letzte Worte.

War nicht persönlich gemeint, war nur eine Feststellung.

Der TS hat hier klar definiert was er will. Er will NICHT den Viewport wissen, sondern den Device Type. Er hat eine TABELLE und will an das Device angepasstes Markup ausliefern.
Dass du das anders machen würdest kann ich nachvollziehen, aber dass du dem TS unterstellst, er wüsste nicht was er fragen soll, ist ziemlich abgehoben.

Aha, ist das hier seit neuem stackoverflow.com? Von Profis für Profis?

Das ist lächerlich. Eine kleine Gruppe fortgeschrittener Programmierer kaut hier größtenteils den absoluten Anfängern alles vor bis diese irgendwie doch noch zum Ziel kommen. Hier kann man weder erwarten dass jemand ansatzweise debuggen kann, noch dass jemand seine Wünsche der korrekten Thematik zuordnen kann. (Hier zB "Alles rund um HTML" - deiner Meinung nach aber ein PHP/JS Scriptproblem)

Im Übrigen gibt es deutlich mehr als Layout. Manche Auftraggeber wollen ausdrücklich unterschiedliche Funktionalitäten zum Beispiel für die Navigation, welcher Content dargestellt wird usw. Das unterscheidet sich häufig auch zwischen Phone und Tablet. Am Viewport sind die längst nicht mehr auseinander zu halten. Aber vielleicht bekommen ja nur die 90% Ahnungslosen solche Aufgaben während die Elite mit 12-Spalten-Standard-Grid jedes Problem lösen kann.

Wo ist der Unterschied zwischen einem 6" Tablet und einem 6" Smartphone? Genau - es gibt keinen!
Und wie siehts mit einem 8" Tablet und einem 20" Tablet aus? Deiner Meinung nach gleich, oder? Sind ja beides Tablets.

Wenn man wirklich andere Inhalte für spezifische Geräte bereitstellen muss (warum auch immer), dann kann man ja den UA hernehmen.
Ging es in diesem Thema darum andere Inhalte darzustellen? Nein. Die gleichen Inhalte, andere Darstellung.
Ich habe ja nicht gesagt dass alle die den UA abfragen keine Ahnung haben. Nur der größte Teil + Du.

Und jetzt lassen wir das ;)