Я загрузил пример Twitter Bootstrap и создал с ним простой проект rails. Я скопировал CSS там, где нужно, и он отображается нормально. Я также скопировал js, и все отлично работает на моем рабочем столе: он реорганизует страницу, когда я меняю размер своего браузера. При использовании некоторых «инструментов тестирования адаптивного дизайна» разных размеров он отлично работает.
У меня проблема с моим iPhone: он отображается точно так же, как на моем рабочем столе.
Когда я пробую страницу примера Bootstrap Hero (с которой я начал), она отлично работает на моем iPhone.
Что может пойти не так? Я почти не касался какого-либо CSS, я просто добавил отступ в нижний колонтитул.
К вашему сведению, 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;
}
@importправила, которое вы используете, но это личное. Вы можете опубликовать тестовый пример?@importметода нотации. Попутно я обнаружил, что многие проблемы были связаны с этой техникой, и обнаружил, что было снижение производительности biiig (а также множество ошибок, которые не могли быть объяснены), которые позже были исправлены путем добавления таблиц стилей с помощью<link>тега html . Сомнения, которые позже были поддержаны такими вопросами, как этот здесь, в SO.Ответы:
Убедитесь, что вы добавили:
<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>источник