Bootstrap responseness navbarをテストしており、 デモ 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ホストに応じてアクセスできる場合とできない場合があります。