Szerokość 100% nie działa na iOS

Question

Z jakiegoś powodu na iphone moja stopka nie rozciąga się na ekranie, mimo że css jest ustawione na szerokość: 100%. Można zobaczyć przykładowe moim stopki problemu tutaj: http://pixelcakecreative.com/tla2/

Moje css na stopce jest następujący:

#footer{ width:100%; margin-top:100px; position:relative; clear:left; background:#4c4c4c; float:left; padding:30px 0;} 

Ten problem dotyczy tylko urządzeń z iOS, jak układ działa poprawnie w przeglądarkach komputerowych. Jakiś pomysł jak to naprawić? Próbowałem wszystkiego, co wymyśliłem. Dzięki!

Answer 1

Try upraszczając swoje imię meta rzutnię (przynajmniej dla iOS) do następujących linii:

Zwykle mówi się, że mniej atrybutów niż ty masz, wiem, ale zadziałało w przypadku moich projektów mobilnych.

Teraz, po dokładniejszym sprawdzeniu, większość, jeśli witryna znajduje się pod "centrum", a następnie masz opakowanie i stopkę.

Kod stosowany do otoki i stopki jest inny. Wrapper ma stałą wartość width:941px;, podczas gdy stopka ma tylko width:100%. Większość elementów wewnątrz opakowania ma width:100%, ale działa tylko dlatego, że opakowanie ma width: 941px.

Więc albo spróbować dodając, że sama szerokość i wyściółka do stopki {width:941px; padding:30px 34px;} lub coś wzdłuż tych linii lub

Rzucasz stopkę wewnątrz podobny owijki z utrwalono, obicia, etc i pozwól niech stopka zachować width:100%;

Answer 2

Prawdopodobnie brakuje mobilną rzutni meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

jest to potrzebne urządzeń mobilnych tak jak iOS odpowiednio przeskalować stronę do rzutni. Możesz read about it here lub here.

Answer 3

Spróbuj pozostawić początkową skalę i maksymalną skalę pustymi i użyć opcji przewijania przez użytkownika = nie. Pierwsze dwa pozwoliły na ten sam błąd w naszym projekcie z responsywnym projektem. Nie zrozumiałem jeszcze dlaczego.

Answer 4

swój div#innerFooter uniemożliwia stopkę aby prawidłowo skalować, dopasować szerokość do 100% i że należy go naprawić

#innerFooter {width:100%}