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

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

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

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

Ответ 1

Добавьте это в свой 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

Ответ 2

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

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

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

Ответ 3

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

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