レスポンシブWebサイトがモバイルで全幅にズームアウト

Bootstrapの応答性のナビゲーションバーをテストしています。デモ用の Webサイトがあります。デスクトップでブラウザーのサイズを変更すると、ナビゲーションバーが上部にある小さなアイコンで折りたたみ可能なメニューになり、クリックしてさらにメニューボタンを表示できるなど、すべて正常に機能します。

しかし、モバイルブラウザー（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">

自動スケーリングが可能なため、with / heightが自然に採用されるように、ポートレートからランドスケープに移動し、より快適なユーザーエクスペリエンスを実現できるため、より良い選択になります。

承認された回答が機能しないこのエラーを検索する人のためにこれを追加します。これはまれなケースですが、それでもイライラするケースになると思います。

ページがフレームセット内でレンダリングされている場合（ドメインクローキングなど）、メタタグを配置しても効果がありません。それらをクローキングドメインのページに配置する必要があります。DNSホストによっては、アクセスできる場合とできない場合があります。

ブラウザのキャッシュをクリアして、新しいタブでページを開いてみてください。これにより、発生するたびに問題が解決することがあります。