it-swarm.com.ru

Простая страница Bootstrap не отвечает на iPhone

Я скачал пример 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;
}
80
RaySF

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

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

на ваш <head>.

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

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

174
Víctor López García

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

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

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

106
Nicolas BADIA

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

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

6
nullable

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

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

2
unicornherder