responsive Design

[SpiceLab]

Eine korrekte Dimensionsangabe vorausgesetzt, bin ich mangels iPhone nicht imstande, die Ursache für das Fehlverhalten analysieren/benennen zu können, aber unsere Diskussionsgrundlage zeigt da was Spezielles für iPhone 4. Vielleicht trifft es auch auf iPhone 6 zu:

/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}

durchgestrichen -> obsolet. Grund siehe nachfolgenden Post.

 

[SpiceLab]

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

Eine korrekte Dimensionsangabe vorausgesetzt

Auszug Apple-Store:

iPhone 6:
4,7" Multi-Touch Widescreendisplay mit LED-Hintergrundbeleuchtung und IPS-Technologie (11,93 cm Diagonale)
1334 x 750 Pixel bei 326 ppi

iPhone 6 Plus:
5,5" Multi-Touch Widescreendisplay mit LED-Hintergrundbeleuchtung und IPS-Technologie (13,97 cm Diagonale)
1920 x 1080 Pixel bei 401 ppi

 

[Nugorra]

Allerdings habe ich ne kleine Frage beüglich Landscape.
Dort ist folgende Angabe vorgegeben:

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

Das würde doch auch bedeutet, dass PCs in diese Kategorie mit rein fallen, denn die haben ja locker eine min-widht von 321px
Oder seh ich das falsch?

So siehst du das richtig,
die Angabe wie sie da steht ist z.B. geeignet für eine Mobile First Seite.
Also für eine Seite deren Grund CSS nur die Mobile Darstellung hat
und in der mit höherer Breite weiter Sachen hinzukommen bzw. angepasst werden.
(So hast du dann Media Querys die auf dem vorherigen aufbauen)
bsp. nächster break könnte sein

@media only screen and (min-device-width : 768px)
{
/* YOUR STYLE GOES HERE */
}

 

[jeipack]

Damit die media querys für iPhones (und allgemein Smartphones) richtig funktionieren brauchst du einen Metatag:

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

(Im head einfügen)

So hat ein iPhone 6 dann ein width von 375px (und ein bisschen mehr wenn es ein iPhone 6 Plus ist).

Danach hat man meistens 3 verschiedene Querys. (jenachdem ob du mobile first oder desktop first gehst).
Im Fall von desktop first hast du zB:

/* allgemein */
.content {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

/*sobalds unter 1000px geht willst du den content auf width 100% schalten */
/* zB für tablets */
@media (max-width:1000px) {
.content {
width: 100%;
}
}
/* wenns noch kleiner wird, willst du eventuell bestimmte Elemente verstecken, oder die Navigation anders stylen */
@media (max-width:500px) {
.dontShowOnMobile {
display: none;
}
}

(Nur schnell hingeschrieben um ein Beispiel zu geben)

Bei diesem Beispiel gehst du also von der Desktopversion aus (die du ja im Moment hast) und überschreibst die Styles für kleinere Auflösungen.

Jedes einzelne Smartphone (resp. jede einzelne Auflösung) anzusprechen ist ein Ding der Unmöglichkeit (Du könntest es machen, aber bis du fertig bist sind wieder 3 neue Geräte drausen mit geringfügig anderen Auflösungen). Deshalb nimm einfach einen Breakpoint (in meinem Beispiel 1000px und 500px) und arbeite da vor allem mit Prozentangaben für Width.


Das wären so die Basics.