Responsive Design - aber wie?

[Bastler]

Hallo,

ich möchte eine seit langem existierende Site smartphonetauglich machen. Das bisherige Design ist im Grundsatz sehr alt und sah schon auf PCs mit 640*480px gut aus und sieht bis heute nach wie vor gut aus (nur ein body {max-width:...} ist irgendwann hinzugekommen). Nur auf dem Smartphone ist alles sehr klein.

Nachdem ich mich fleißig eingelesen habe, schien mir @media (max-width) als Ergänzung im CSS die richtige Wahl. Nur: Auf PCs mit 800*600px möchte ich das bisherige Design, auf Smartphones dagegen eben die neuen @media-Angaben. Deswegen ist @media (max-width:999px) nicht das, was ich will. Dann dachte ich mir, es geht ja gar nicht um die Auflösung, sondern die tatsächliche Größe des Geräts. Also @media (max-width:16cm) ausprobiert. Seltsamerweise glaubt mein Handy, es wäre größer...

Hat jemand einen Tipp, wie ich das sinnvoll angehen kann?

Bastler

[Matthias Apsel]

Om nah hoo pez nyeetz, Bastler!

ich möchte eine seit langem existierende Site smartphonetauglich machen.
Hat jemand einen Tipp, wie ich das sinnvoll angehen kann?

Zunächst lauten deine Suchbegriffe »meta viewport«. Dann wird sich schon einiges an der Darstellung ändern.

Matthias

[Bastler]

Zunächst lauten deine Suchbegriffe »meta viewport«. Dann wird sich schon einiges an der Darstellung ändern.

Wenn ich das richtig verstanden habe, würde das bedeuten, ein zusätzliches Tag in jedem einzelnen HTML-File einzufügen. Genau das ist aber etwas, was ich nicht will. Wiederspricht doch dem Gedanken von CSS. Wozu ist denn ein zentrales CSS sonst da? Das muss doch irgendwie in CSS gehen...

Bastler

[Gunnar Bittersmann]

@@Bastler:

nuqneH

Wenn ich das richtig verstanden habe, würde das bedeuten, ein zusätzliches Tag in jedem einzelnen HTML-File einzufügen. Genau das ist aber etwas, was ich nicht will. Wiederspricht doch dem Gedanken von CSS. Wozu ist denn ein zentrales CSS sonst da? Das muss doch irgendwie in CSS gehen...

@viewport

Spec ist noch Working Draft (Latest editor's draft).

Zur Browserunterstützung schweigt sich caniuse.com noch aus. Ich würde bei der meta-Angabe im HTML eine deutlich höhere vermuten.

Qapla'

[Gunther]

Hallo!

Zunächst lauten deine Suchbegriffe »meta viewport«. Dann wird sich schon einiges an der Darstellung ändern.

Wenn ich das richtig verstanden habe, würde das bedeuten, ein zusätzliches Tag in jedem einzelnen HTML-File einzufügen.

Richtig.

Genau das ist aber etwas, was ich nicht will.

Was du willst, und was nicht ...! :-P

Wiederspricht doch dem Gedanken von CSS.

Ein Meta-Tag hat ja auch nichts mit CSS zu tun ...! ;-)

Wozu ist denn ein zentrales CSS sonst da? Das muss doch irgendwie in CSS gehen...

Ja, mit der @viewport at-rule.
Siehe bspw.: http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport

Aufgrund mangelnder Browserunterstützung wirst du aber aktuell zumindest noch nicht um den (zusätzlichen) Meta-Tag herumkommen ...!

Gruß Gunther