Страница Simple Bootstrap не отвечает на iPhone

84

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

twitter-bootstrap responsive-design

— RaySF
источник

Можете ли вы опубликовать тестовую страницу или какой-нибудь код?

— Андрес Ильич

Это отзывчиво для меня. Как вы думаете, почему он не реагирует?

— Джесси Уолгамотт,

@RaySF Я не вижу причины, по которой это не должно работать, хотя у меня есть некоторые сомнения по поводу @importправила, которое вы используете, но это личное. Вы можете опубликовать тестовый пример?

— Андрес Ильич

@JesseWolgamott он не реагирует на мой iphone, когда я открываю две страницы, упомянутые выше, официальные примеры работают нормально (например, меню не отображается одинаково), но моя страница отображается так же, как на рабочем столе.

— RaySF

1

@RaySF Из-за характера моей работы мне пришлось исследовать способы повышения совместимости и повышения производительности очень больших таблиц стилей, которые были сложены с использованием @importметода нотации. Попутно я обнаружил, что многие проблемы были связаны с этой техникой, и обнаружил, что было снижение производительности biiig (а также множество ошибок, которые не могли быть объяснены), которые позже были исправлены путем добавления таблиц стилей с помощью <link>тега html . Сомнения, которые позже были поддержаны такими вопросами, как этот здесь, в SO.

— Андрес Ильич

185

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

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

к вашему <head>.

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

Обновление : ознакомьтесь с ответом @NicolasBADIA для получения более полной версии.

— Виктор Лопес Гарсия
источник

8

и это, чтобы работать как в портретной, так и в альбомной ориентации: <meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;" />

— virtualeyes

@virtualeyes, спасибо за подсказку! есть идеи, как разрешить масштабирование пользователя и заставить работать lanscape view правильно?

— Андрей

Нет, я использую JQuery для мобильных устройств и не очень верю в адаптивный дизайн. Пусть мобильные устройства будут мобильными, а планшеты и выше - настольными. Что-то среднее, пофиг ;-)

— virtualeyes

111

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

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

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

— Николас БАДИА
источник

4

Примеры на официальном сайте Twitter Bootstrap должны быть обновлены, чтобы использовать это.

— wenbert

1

Замечательное уведомление, спасибо! Была аналогичная проблема с поворотом экрана, теперь работает как брелок.

— Марк Витал

8

Это должен быть принятый ответ!

— Sheharyar 07

6

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

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

— обнуляемый
источник

2

Я часами пытался решить эту проблему и в конце концов наткнулся на этот комментарий. Спасибо!

— Эд Ши

Этот комментарий порадует небольшую группу людей.

— Николас Рохо

Я не вижу обернутого iframe, но, имея эту проблему с правильными метатегами, могут ли они как-то скрыть iframe?

— helle

3

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

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

— dpigera
источник