Простая страница Bootstrap не реагирует на iPhone
Я загрузил пример загрузки Twitter и создал с ним простой проект rails. Я скопировал 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;
}
5 ответов:
убедитесь, что вы добавить:
<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>
добавить в тег head он работает круто отзывчивый на любом устройстве убедитесь, что добавить, который используется для полной ширины с adjust responsive
Comments