Простая страница Bootstrap не реагирует на iPhone

Я загрузил пример 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;
}

Ответ 1

Убедитесь, что вы добавили:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

на ваш <head>.

У меня была аналогичная проблема, и я по ошибке подумал, что это просто вопрос ширины окна просмотра.

Обновление: выйдите из ответа @NicolasBADIA для более полной версии.

Ответ 2

Код, предложенный frntk, не работает, когда вы поворачиваете устройство в альбомном режиме, а решение, заданное virtualeyes, неверно, поскольку вместо запятой используется точка с запятой. Вот правильный код:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Источник: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Ответ 3

Конечно, очень маленький кромка, но стоит упомянуть.

Если вы используете переадресацию домена через своего провайдера DNS, ваш сайт может быть завершен в iframe. GoDaddy, например, использует эту технику, если вы маскируете свой домен и переадресовываете.

Ответ 4

Я застрял в этой проблеме несколько часов.

Не забудьте также разместить содержимое внутри <div class="container-fluid">...</div>

Ответ 5

добавить в свой заголовок он отлично реагирует на любое устройство, убедитесь, что добавьте, который используется для полной ширины, отрегулируйте чувствительность