Ściągnąłem przykład Twittera Bootstrap i stworzyłem z nim prosty projekt railsowy. Skopiowałem css w razie potrzeby i wyświetla się dobrze. Skopiowałem też js i wszystko działa świetnie na moim komputerze: reorganizuje stronę, gdy zmieniam rozmiar mojej przeglądarki. W przypadku korzystania z niektórych „responsywnych narzędzi do testowania projektów” o różnych rozmiarach działa świetnie.
Problem, który mam, dotyczy mojego iPhone'a: wyświetla się tak, jak na moim pulpicie.
Kiedy wypróbowuję stronę Bootstrap Hero Example (od której zacząłem), działa świetnie na moim iPhonie.
Co mogłoby pójść źle? Prawie nie dotknąłem żadnego CSS, po prostu dodałem dopełnienie w stopce.
Do Twojej wiadomości, CSS, który zmieniłem, polega na tym, że łączę moją aplikację application.cssz następującą zawartością:
/* Application stylesheet */
@import url(bootstrap.css);
@import url(bootstrap-responsive.css);
/* Body */
body {
padding-top: 60px;
padding-bottom: 40px;
}
/* Footer */
footer {
padding: 20px 0;
}
@importzasady, której używasz, ale to sprawa osobista. Czy możesz opublikować przypadek testowy?@importmetody notacji. Po drodze zauważyłem, że wiele problemów wynikało z tej techniki i odkryłem, że wystąpił duży spadek wydajności (a także wiele błędów, których nie można było wyjaśnić), które zostały później naprawione przez dołączenie arkuszy stylów za pomocą<link>tagu HTML . Wątpliwości, które zostały później poparte pytaniami takimi jak ta tutaj w SO.Odpowiedzi:
Upewnij się, że dodałeś:
<meta name="viewport" content="width=device-width, initial-scale=1.0">do twojego
<head>.Miałem podobny problem i błędnie pomyślałem, że to tylko kwestia szerokości widocznego obszaru.
Aktualizacja : sprawdź odpowiedź @NicolasBADIA, aby uzyskać bardziej kompletną wersję.
źródło
Kod zaproponowany przez frntk nie działa po włączeniu urządzenia w widoku poziomym, a rozwiązanie podane przez wirtualne tak jest niepoprawne, ponieważ używa średnika zamiast przecinków. Oto poprawny kod:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />Źródło: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
źródło
To prawda, bardzo mały przypadek, ale warto o tym wspomnieć.
Jeśli korzystasz z przekierowania domeny przez dostawcę DNS, Twoja witryna może zostać opakowana w ramkę iframe. Na przykład GoDaddy użyj tej techniki, jeśli maskujesz swoją domenę i przekierowujesz.
źródło
Utknąłem z tym problemem przez kilka godzin.
Nie zapomnij również umieścić zawartości w pliku
<div class="container-fluid">...</div>źródło
container-fluidzałatwiło sprawę dla mnie!