Responsywna witryna została powiększona do pełnej szerokości na urządzeniach mobilnych

Testuję pasek nawigacyjny responsywności Bootstrap i mam witrynę demonstracyjną . Kiedy zmieniam rozmiar przeglądarki na pulpicie, wszystko działa dobrze, w tym pasek nawigacyjny, który staje się rozwijanym menu z małą ikoną u góry, którą mogę kliknąć, aby zobaczyć więcej przycisków menu.

Ale kiedy wypróbowałem to w przeglądarce mobilnej (wypróbowałem na Chrome i przeglądarce internetowej na Androidzie), nie widziałem responsywnego projektu. Widziałem tylko bardzo małą wersję strony internetowej podobnej do komputera.

Czy ktoś mógłby wskazać, co robię źle?

Dodaj to do swojej głowy HTML ...

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

To mówi mniejszym przeglądarkom urządzeń, jak skalować stronę. Możesz przeczytać więcej na ten temat tutaj: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

zgodnie z sugestią tutaj http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

byłby jeszcze lepszym wyborem, ponieważ sprawia, że ​​przejście od portretu do krajobrazu iz powrotem jest znacznie przyjemniejsze dla użytkownika, ponieważ z / height przyjąłby się naturalnie z powodu możliwego automatycznego skalowania.

Dodanie tego dla osób szukających tego błędu, dla których zaakceptowana odpowiedź nie działa. Uważam, że będzie to rzadszy, ale mimo to frustrujący przypadek:

Jeśli Twoja strona renderuje się wewnątrz zestawu ramek (na przykład maskowanie domeny), umieszczenie metatagów nie pomoże. Musisz umieścić je na stronie w domenie maskującej, do której możesz mieć dostęp lub nie, w zależności od hosta DNS.

Spróbuj wyczyścić pamięć podręczną przeglądarki i otwórz stronę w nowej karcie. To czasami rozwiązuje problem za mnie, gdy to się dzieje.