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

Question

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

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

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

Answer 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

Answer 2

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

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

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