wake-up-neo.com

Div-Inhalte ansprechbar machen

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

Ich habe das CSS meines Containers geändert in:

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

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

7
user1636968

probiere 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/

14
Fredy

Nicht viel, um dort weiterzumachen, aber ich denke, Sie suchen nach den Werten von width und max-width:

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

Dadurch erhalten Sie einen Container, der 90% der Breite des verfügbaren Speicherplatzes entspricht (maximal 960px). Dies hängt jedoch davon ab, ob der Container selbst die Größe des Containers ändern kann. Responsive Design ist ein ganz großer Wachskugel, so dass die Oberfläche nicht einmal zerkratzt wird.

7
ultranaut

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

0
Scriptery