Я загрузил пример Twitter Bootstrap и создал с ним простой проект рельсов. Я скопировал css там, где это необходимо, и он отображает все. Я также скопировал js и все отлично работает на моем рабочем столе: он реорганизует страницу, когда меняю размер моего браузера. При использовании некоторых "гибких инструментов тестирования дизайна" с разными размерами он отлично работает.
Проблема у меня на моем iPhone: он отображает juste, как на моем рабочем столе.
Когда я пытаюсь выполнить страницу примера Bootstrap Hero (с которой я начинал), он отлично работает на моем iPhone.
Что может пойти не так? Я почти не тронул ни одного CSS, я просто добавил прописку на нижнем колонтитуле.
FYI, CSS, который я изменил, заключается в том, что я привязываю свое приложение к application.css со следующим содержимым:
/* Application stylesheet */
@import url(bootstrap.css);
@import url(bootstrap-responsive.css);
/* Body */
body {
padding-top: 60px;
padding-bottom: 40px;
}
/* Footer */
footer {
padding: 20px 0;
}
Убедитесь, что вы добавили:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
на ваш <head>.
У меня была аналогичная проблема, и я по ошибке подумал, что это просто вопрос ширины окна просмотра.
Обновление: выйдите из ответа @NicolasBADIA для более полной версии.
Код, предложенный frntk, не работает, когда вы поворачиваете устройство в альбомном режиме, а решение, заданное virtualeyes, неверно, поскольку вместо запятой используется точка с запятой. Вот правильный код:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Источник: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Конечно, очень маленький кромка, но стоит упомянуть.
Если вы используете переадресацию домена через своего провайдера DNS, ваш сайт может быть завершен в iframe. GoDaddy, например, использует эту технику, если вы маскируете свой домен и переадресовываете.
Я застрял в этой проблеме несколько часов.
Не забудьте также разместить содержимое внутри <div class="container-fluid">...</div>
добавить в свой заголовок он отлично реагирует на любое устройство, убедитесь, что добавьте, который используется для полной ширины, отрегулируйте чувствительность