Чуйний веб-сайт зменшився на повну ширину на мобільному пристрої

Я випробовую навігаційну систему чутливості 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">

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

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

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

Спробуйте очистити кеш браузера та відкрийте сторінку на новій вкладці. Це іноді вирішує проблему для мене, коли це відбувається.