Dzielenie się wrażliwymi treściami Div

Question

Moje treści nie reagują w tej chwili. Przetestowałem to na iPhonie, a tekst przechodzi przez ekran.

Zmieniłem CSS mojego pojemnika do:

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

Kiedy przetestować go po zmianie, treść znika. Czytałem, że wprowadzenie maksymalnej szerokości: 90%; pozwoliłoby, aby nie przekraczało szerokości granicy (http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design), ale oczywiście nie działało. Co ja robię źle?

Answer 1

spróbować tej 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%; } 
} 

Oto demo: http://jsfiddle.net/ongisnade/CG9WN/

Answer 2

Nie za dużo, aby przejść tam, ale myślę, że to, czego szukasz, aby odwrócić width i max-width wartości:

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

To da ci pojemnik, który jest 90% szerokości dostępnej przestrzeni, maksymalnie do 960 pikseli, ale to zależy od możliwości zmiany rozmiaru kontenera. Responsywny design jest jednak dużą kulką wosku, więc nawet nie zarysowuje powierzchni.

Answer 3

@media screen and (max-width : 760px) (dla tabletów i telefonów) i korzystać z tego: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">