responsive Design

[SpiceLab]

Die genannte Seite zeigt doch, wie die Unterscheidungen mittels min-width u. max-width definiert werden.

 

[SpecialFighter]

schon klar, nur was nimmt man am besten für einen max-width für landscape smartphone?

 

[SpiceLab]

Steht dort alles...

Entweder

/* All Smartphones in portrait and landscape ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}

oder

/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in portrait ----------- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}

 

[SpecialFighter]

ich würde ja gerne nur die Geräte im Landscape anschprechen:

und hiermit spreche ich doch auch PCs an, wie wir eben festgestellt haben:
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}

 

[SpiceLab]

ich würde ja gerne nur die Geräte im Landscape anschprechen

Und was soll bei den mobilen Geräten (Smartphone, Tablet) im Hochformat (portrait) geschehen?

und hiermit spreche ich doch auch PCs an, wie wir eben festgestellt haben:
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}

max-device-width spricht PCs nicht an.

Gleiches gilt für die Kombination min-device-width u. max-device-width.

 

[SpecialFighter]

so ganz warm werde ich damit noch nicht:

@media only screen and (min-device-width:320px) and (max-device-width:480px){... }

Die Angaben sind nicht ganz aktuell:
Ein iPhone 6 z.B. hat ja schon im landcape ne width von 736
Habe also den max wert angepasst, aber iphone 6 plus reagiert darauf nicht

 

[SpiceLab]

So wirst du auch nicht alle unterschiedlichen Größen der einzelnen Ausgabemedien erschlagen können - eigentlich logisch!

Aus diesem Grund gibt es schließlich auch differenzierte Media Queries!

Nur mal zum Bedenken: Mein "Samsung Galaxy Note 3" kommt mit 360px*640px daher.

 

[SpecialFighter]

ich möchte auch nicht unterschieldiche Ausgaben machen.
Ich möchte EIN Design für alle Smartphones anbieten.

aber warum reagiert das iphone 6 plus auf die o.g. Codezeile nicht?

 

[SpiceLab]

"Alle" Smartphones besitzen aber unterschiedliche Bildschirmauflösungen im Hoch- u. Querformat, die es zu berücksichtigen gilt.

Wenn dein Media Query wie zuletzt gezeigt lautet, spielt sich der Viewport zwischen "320px" u. "480px" ab, und die "736px" fallen logischerweise durch.

 

[SpecialFighter]

hatte doch geschrieben, dass ich es angpasst habe:

media only screen and (min-device-width:320px) and (max-device-width:736px){... }