Hallo
Ich habe eine (selbsterstellt, kein Wordpress o.ä.) Webseite und möchte sie für mobile Geräte anpassen. Am liebsten mit einer separaten CSS-Datei. Dies ist soweit kein Problem.
Ich möchte jedoch einen Link à la „Zur Desktop-Version wechseln“ hinzufügen. Wie kann ich das realisieren? Die CSS-Links sind ja statisch, d.h. media = screen oder handheld und so weiter. So ist es doch einfach, dass Personen mit einem Smartphone fix mobile.css ausführen, oder?
Danke
Ich denke, das Umschalten würde man mit Javascript realisieren, was jedoch Nachteile hat. Mir scheint es sinnvoller zu sein, mittels CSS Konditionen (Bildschirmbreite) festzulegen, unterhalb derer bestimmte Formatierungen angewendet werden. Stichwort „Responsive Web Design“.
Nach dem Muster:
@media screen and (max-width: 400px) { body { font-size: 9px; } }
könnte zB festgelegt werden, dass auf kleineren Bildschirmen (Handy) die Schriftgröße nur 9px ist (statt sonst vielleicht 12px). Auch sämtliche anderen CSS-Formatierungen sind so zu steuern (Breite von DIVs, max. Größe von Bildern, Bilder Float, Anzeige Headergrafik etc.), je nachdem auf welcher Bildschirmgröße die Seite dargestellt wird.
Das hat den Vorteil, dass der Besucher nicht erst den Button finden muss, um die Darstellung umzuschalten – und dass kein JS verwendet werden muss.
Hier ein sehr guter und ausführlicher Artikel (auf Englisch) von Ethan Marcotte zu diesem Thema:
http://www.alistapart.com/articles/responsive-web-de…
Es ist einige Arbeit, vor allem wenn bereits eine umfangreiche Seite existiert, aber mir scheint diese Lösung unterm Strich am elegantesten zu sein.
Viel Spaß
Dominik
Hi!
Also, erstens kannst Du ein Element einfügen, dass nur sichtbar wird, wenn Du die Handheld-Version aufrufst. Das machst Du über die CSS-Eigenschaft Display im Handheld-Abschnitt (display: none:wink:. http://de.selfhtml.org/css/eigenschaften/positionier…
Ansonsten kannst Du mittels PHP auch den User-Agent abfragen und wenn es ein Smartphone wie iPhone oder ein Android-Handy ist, dann wird halt ein CSS verwendet, welches die normale Darstellung umfasst.
LG,