Bastler: Responsive Design - aber wie?

SELF-Forum

Responsive Design - aber wie?

Bastler
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Responsive Design - aber wie?

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Band und Bandit.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Responsive Design - aber wie?

      Bastler
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Responsive Design - aber wie?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Responsive Design - aber wie?

        Gunther
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln