DIV-Inhalt ansprechend machen

Question

Mein Inhalt reagiert im Moment nicht. Ich habe es auf dem iPhone getestet und der Text geht über den Bildschirm.

Ich habe die CSS meines Behälters geändert:

#container2 { 
    width: 960px; 
    max-width: 90%; 
    position: relative; 
    left: 50%; 
    margin-left: -480px; 
    line-height: 1.4em; 
} 

Als ich es nach der Änderung zu testen, verschwindet der Inhalt. Ich habe gelesen, dass die maximale Breite: 90%; würde es erlauben, die Grenzbreite nicht zu überschreiten (http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design), aber offensichtlich hat es nicht funktioniert. Was mache ich falsch?

Answer 1

versuchen, diese CSS:

/* Show in default resolution screen*/ 
#container2 { 
width: 960px; 
position: relative; 
margin:0 auto; 
line-height: 1.4em; 
} 

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */  
@media only screen and (max-width: 479px){ 
    #container2 { width: 90%; } 
} 

hier die Demo: http://jsfiddle.net/ongisnade/CG9WN/

Answer 2

Nicht viel auf, dorthin zu gehen, aber ich denke, was Sie suchen ist die width und max-width Werte leicht zu schlagen:

#container2 { 
    width: 90%; 
    max-width: 960px; 
    /* etc, etc... */ 
} 

Das wird Sie einen Behälter geben, die 90% der Breite ist der verfügbaren Speicherplatz, bis zu einem Maximum von 960px, aber das hängt davon ab, dass der Container selbst in der Größe veränderbar ist. Responsive Design ist eine ganze große Kugel aus Wachs, also kratzt es nicht einmal die Oberfläche.

Answer 3

@media screen and (max-width : 760px) (für Tabletten und Telefone) und verwenden Sie mit diesem: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">