Адаптивный веб-сайт увеличен до полной ширины на мобильном

121

Я тестирую навигационную панель Bootstrap, и у меня есть демонстрационный сайт. Когда я изменяю размер браузера на рабочем столе, все это прекрасно работает, включая панель навигации, которая становится складным меню с маленьким значком сверху, на который я могу щелкнуть, чтобы увидеть больше кнопок меню.

Но когда я попробовал его из мобильного браузера (я попробовал его на Chrome и интернет-браузере на Android), я не видел отзывчивого дизайна. Я мог видеть только небольшую версию рабочего стола, такого как веб-сайт.

Может ли кто-нибудь указать, что я делаю неправильно?

Теги:
bootstrap-4
user-interface
twitter-bootstrap-3
responsive-design

3 ответа

355
Лучший ответ

Добавьте это в свой HTML-заголовок.

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

Это говорит меньшим браузерам устройств, как масштабировать страницу. Подробнее об этом можно узнать здесь: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Поделиться
  • 1
    я добавил этот код в раздел заголовка, но он не работает для моего браузера Internet Explorer по умолчанию, который вы можете проверить - www.freerechargeapp.com/index.html
  • 0
    Я действительно не понимаю, почему у меня не работает. На одном веб-сайте работают, а на другом - нет. И структура кода похожа на свежую загрузку
Показать ещё 3 комментария
17

как предлагается здесь http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

<meta name="viewport" content="initial-scale=1">

был бы еще лучшим выбором, поскольку он переходил от портрета к пейзажу и обратно к гораздо более приятному пользовательскому опыту, так как с /height естественным образом принимался бы за возможное автоматическое масштабирование.

Поделиться
  • 0
    Спасибо, это исправило проблему масштабирования на iPhone, и по-разному (и правильно) отображает книжную и альбомную ориентацию.
0

Добавление этого для людей, которые ищут эту ошибку, для которой принятый ответ не работает. Я считаю, что это будет более редкий, но, тем не менее, разочаровывающий случай:

Если ваша страница выполняет рендеринг внутри набора фреймов (например, клонирование домена), то мета-теги не помогут. Вам нужно будет поместить их на страницу в клоакинг-домен, к которому у вас может быть или нет доступ, в зависимости от вашего хоста DNS.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню