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

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

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

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

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

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

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

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

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

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

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