Anzeigeproblem (iphone), spalten werden nicht 100% angezeigt

[Michael]

Ich habe ein Anzeigeproblem, das vor allem das Iphone betrifft.
Ich habe meine TestSeite in drei Bereiche

.1d1
.1d2
.1d3

eingeteilt. Jedem Bereich habe ich eine Farbe gegeben. Der Hintergrund der Seite selbst ins Schwarz.
in den Bereich id2 habe ich eine Content box integriert die zentriert erscheinen soll.
Alles funktioniert einbandfrei
.
Siehe : http://fiddle.jshell.net/cwryt7hb/5/

in Vollauflösung zum besseren Verstehen hier:

http://fiddle.jshell.net/cwryt7hb/5/show/

Aber wenn ich es mit einem Iphone betrachte, zerhaut es mir alle meine Bereiche. So als ob der Wert 100% nicht angenommen wird.

Das Ganze ist unter :

http://iphone5csimulator.com/

zu betrachten. Einfach die

http://fiddle.jshell.net/cwryt7hb/5/show/

eingeben.

Was mache ich da falsch das die Seite nicht korrekt angezeigt wird.

Vieleicht kann mal wer über meinen Code schauen und mir sagen was da schief läuft:

Michael

  
body {  
	background: #000;  
	margin:0;  
	padding:0;  
	height: 100%;  
	}  
.id1 {  
    background:#ff0000;  
    width:100%;  
    height:100px;  
}  
.id2 {  
    background:#FFF;  
    width:100%;  
    height:200px;  
}  
.id3 {  
    background:#ff0000;  
    width:100%;  
    height:200px;  
}  
  
.content {  
	margin:0 auto;  
	min-width:700px;  
	max-width:1000px;  
    height:100px;  
	padding:0 20px 0 20px;  
    background:#FFD700;  
}  
  
  

<div class="id1"></div>  
<div class="id2">  
<div class="content"></div>  
</div>  
<div class="id3"></div>

[Gunther]

Hallo Michael!

Ich habe ein Anzeigeproblem, ...

Ich befürchte, du hast weit mehr Probleme ...! ;-)

Ich weiß auch gar nicht so recht, wo ich da anfangen (semantisch korrekte HTML5 Elemente anstelle von "DIV-Suppe", sinnvolle Verwendung von Class- und ID-Attributen mit entsprechend sinnvollen Werten, ...) und aufhören sollte (Viewport Meta-Tag, Flexbox, ...), deshalb hier erstmal ein Hinweis/ Tipp:

Weißt du wie breit (in CSS-Pixel) bspw. der Viewport eines iPhone 5C ist?
Und egal wie breit ein Viewport ist, entspricht seine Breite immer 100%.

Wenn man jetzt hingeht, und Prozentwerte mit absoluten Werten (wie bspw. 'px') mischt/ kombiniert, z.B. in 'min-/max-width' Angaben, dann kann die vorgegebene Breite eben auch größer als die 100% sein!

Gruß
Gunther