Frage von Urferart,

Wie kriege ich es hin, dass meine Homepage auf dem Handy-Browser ein anderes Outfit hat

Guten Abend liebe GF-Helfer!

Ich hoffe ihr versteht mein Anliegen... Meine Homepage funktioniert zwar wunderbar auf einem normalen PC (jedenfalls mit firefox) aber ich würde sie gerne für das Handy mit einer anderen Startseite versehen (da normalerweise ein Imageloop geladen wird und das auf dem Handy nicht immer gelesen werden kann) meine Frage nun, wie kriege ich das hin, das ein Handy automatisch auf die Handy-Version umschaltet und am PC nicht, ich will keinen Button machen zum anklicken dafür bräuchte ich ja noch einmal eine seperate startseite zum aussuchen der Versionen.. Gibt es dazu ein HTML- Skript oder ist das eine andere Programmiersprache oder nur ein Quellcode den ich übernehmen kann?... vielen dank für die hilfe

Hilfreichste Antwort von freejack75,
2 Mitglieder fanden diese Antwort hilfreich

die schönste Lösung sind CSS Media Queries, weil das reines Styling ist und ohne unzuverlässige Javascript-Abfragen auskommt. Schau mal http://www.teeundwhisky.de mit einem modernen Browser an (bis auf IE geht jeder), und schiebe die Seite schmaler. Je nach Platz kommt ein anderes Stylesheet zur Anwendung. So kriegt ein kleines Firefox-Fenster ebenfalls eine "mobile" Version, ein breiter Ipad-Browser dagegen was Desktop-Ähnlicheres. Immer so wie es passt.

Kommentar von Urferart,

Ja so etwas würde ich gerne machen, kann ich da vorgefertigte Grundmuster runterladen oder ist das CSS Media Queries eine Programmier-Sache? ich will eigentlich nur das Imageloop durch eine Grafik ersetzten der rest funktioniert gut mit Mobile-Geräten

Kommentar von freejack75,

nein, CSS media Queries sind Stylesheets. Du machst 1 x HTML, und N x CSS. Es ist keinerlei Programmierung notwendig, geht alles mit Markup.

Kommentar von Urferart,

Tipp-Topp! Da klemm ich mich gleich mal dahinter! vielen dank für deine unterstützung!

Antwort von codingfreak,

Verschiedene CSS-Files anlegen und im HTML-Sourcecode auf beide linken. Und zwar so:

[link rel="stylesheet" href="normal.css" media="screen" /]
[link rel="stylesheet" href="mobil.css" media="handheld" /]

Sollte klappen (natürlich [ und ] durch spitze Klammern ersetzen)

Kommentar von Urferart,

aber dann müsste ich die normal.css und die mobile.css erstellen? ich kenne mich nur mit html ein wenig aus, aber css sind Cascading Style Sheets, wie kriege ich die hin? (googeln!) hmpf!

Kommentar von freejack75,

so gehts gar nicht, weil mit diesem media query nicht dynamisch auf die Breite eingegangen wird. Es ist ein reines Glücksspiel, ob der Mobilbrowser xy nun mit media screen oder handheld anzeigt. Und beim Tablet wär's ziemlich doof, wenn er handheld nimmt.

Kommentar von simsch1996,

das ist die user-agent einstellung^^ die steht bei tablets meistens auf pc :D mir wäre da nichts anderes bekannt.

und mit einem kleinen javascript ließe sich das ja noch prima absichern indem man einfach noch kurz die bildschirmauflösung checkt^^

Kommentar von freejack75,

ach komm, las es. JavaScript ist ja noch unzuverlässiger. Es gibt einen praxiserprobten Weg, und der geht über die Query auf die Breite. Da kann man nämlich auch prima auf dem Desktop das Styling debuggen, in dem man das Fenster schmal schiebt und es live und in Farbe angepasst wird.

Hier noch ein nettes Beispiel:

http://praegnanz.de/

Kommentar von simsch1996,

ganz ehrlich, ich würds ja selber auch nie so machen^^ wenn ich eine seite hab die eine mobile-version hat dann ist die idr so groß dass man einen mobilen clienten auch einen anderen inhalt zeigt.. und dann läufts sowieso schon halb serverseitig und es ist kein problem die css auch noch auszutauschen. kleine abfrage im template und fertig :) da muss man dann halt je nach useragent eine weiterleitung oder nachfrage einrichten.

Kommentar von freejack75,

das ist halt Old-School-Denke. Templates waren vorgestern.

Aus User Agents oder anderen Kaffee-Sätzen was rauszulesen ist nicht zukunftssicher.

Mit HTML5 macht man eine semantische Seite. Und die passt dann für Suchmaschinen, Braille-Terminals, Mobilbrowser und überhaupt alles. Das komplette Styling kommt vom CSS. Und das passende CSS sucht sich der User Agent per Media Query aus. Und beim Media Query ist die Breite nun mal ideal, wenn man breitenabhängiges Styling hat.

Kommentar von simsch1996,

wenn das endgerät html5 unterstützt und die kompatibilität voll gegeben wäre. der ansatz ist toll aber leider noch nicht 100% praxistauglich... und du willst mir nicht erzählen dass html5 ein cms oder andere serverseitige scripts ersetzten kann

Kommentar von simsch1996,

semantik ist wichtig, aber nicht unbegrenzt^^ ein template geht auch semantisch, aber wie gesagt, css kann nicht entscheiden welcher inhalt gezeigt werden soll. und wenn der inhalt ein anderer ist ändert das auch die semantik was ein anderes template erforderlich macht^^

Keine passende Antwort gefunden?

Verwandte Fragen

Fragen Sie die Community