responsive - aber nur für Smartphones?

[Nik]

Hi Experten!

ich will (als weitgehender responsive-Neuling) eine bestehende Seite auf "responsiv" trimmen. Die Seite ist 980px breit und funktioniert gut auf Desktop-Browsern und Tablets, aber natürlich nicht so gut auf Smartphones. Die responsive Überarbeitung soll deshalb vor allem die Darstellung und Usability auf Smartphones verbessern.

Wenn ich in den Header nun sowas wie ...

<meta name="viewport" content="width=device-width, initial-scale=1.0">

... schreibe, wird die Seite natürlich nicht mehr skaliert - das brauche ich ja für die Smartphone-Ansicht, aber dann skaliert sich logischerweise auch auf den Tablets nicht mehr. Ich müsste dann einen weiteren Breakpoint für das Tablet-Layout setzen. Diese Arbeit würde ich mir eigentlich gerne ersparen, denn auf den Tablets funktioniert die skalierte Darstellung ja gut.

Gibt es eine von mir noch nicht entdeckte Möglichkeit, wie ich ich dem Browser sagen kann: "Wenn du breiter als 980px bis, stell alles unskaliert dar / wenn du zwischen 600 und 980px breit bist, dann skaliere die Seite / wenn du kleiner als 600px breit bist, dann skaliere doch nicht, sondern nimm dieses andere CSS"?

Ich fürchte ja, die Antwort wird "Nein" lauten. Aber bevor ich mit dem Basteln anfange, wollte ich doch erst hier fragen ...

Danke

Nik

[henman]

servus Nik,

Gibt es eine von mir noch nicht entdeckte Möglichkeit, wie ich ich dem Browser sagen kann: "Wenn du breiter als 980px bis, stell alles unskaliert dar / wenn du zwischen 600 und 980px breit bist, dann skaliere die Seite / wenn du kleiner als 600px breit bist, dann skaliere doch nicht, sondern nimm dieses andere CSS"?

Ich fürchte ja, die Antwort wird "Nein" lauten. Aber bevor ich mit dem Basteln anfange, wollte ich doch erst hier fragen ...

Benutze Media Queries.

henman

[Gunnar Bittersmann]

@@henman:

nuqneH

Benutze Media Queries.

Aber die Frage hast du schon gelesen?

Ich müsste dann einen weiteren Breakpoint für das Tablet-Layout setzen. Diese Arbeit würde ich mir eigentlich gerne ersparen, denn auf den Tablets funktioniert die skalierte Darstellung ja gut.

Qapla'

[misterunknown]

Moin,

Gibt es eine von mir noch nicht entdeckte Möglichkeit, wie ich ich dem Browser sagen kann: "Wenn du breiter als 980px bis, stell alles unskaliert dar / wenn du zwischen 600 und 980px breit bist, dann skaliere die Seite / wenn du kleiner als 600px breit bist, dann skaliere doch nicht, sondern nimm dieses andere CSS"?

Du kannst Viewport-Meta-Tags verwenden.

Grüße Marco