Bootstrap3のNavbarがスマホ表示にならない

あるアプリケーションでBootstrap3でNavbarを使っているのですが、スマホ表示になってくれないのです。

Bootstrap3のNavbarはレスポンシブ対応のはずなのですが、なんでなんでしょうか？

レスポンシブデザインについては以下をご覧ください。

スマホ表示のテストは、パソコンのChromeで行っています。

テスト方法は以下の通りです。

この方法を使ってiPhone 6で私が作っているBootstrap3のNavbarを表示してみたところです。

この通り、スマホ表示になってくれません。

スマホ表示にならない原因

いろいろと調べてみて分かったのですが、以下の記述を入れてみました。

するとこうなりました。

ちゃんと、スマホ表示になってハンバーガーメニューが表示されました。

ハンバーガーメニューを押すと次の通り、ちゃんと動きます。

よかった。よかった。

HTMLのviewポートの意味

以下の表記ですが、おまじないのように、つけたり取ったりしていましたが、少し甘く見ていました。

今初めて重要性に気付きました。

もう逃げない。HTMLのviewportをちゃんと理解する　にも以下のように書かれていました。

1. まず、実際の液晶の解像度は一旦忘れろ。
2. <meta name="viewport" content="width=480">と指定したとする。
3. するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。
4. ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。
5. 次にviewportを実際の液晶画面に表示する。この時、viewportの幅が実際の液晶画面よりも大きければviewportがはみ出して、液晶画面にはviewportの一部しか表示されないだろう。逆に、viewportの幅が液晶画面よりも小さければviewportの内容は液晶画面に収まるが、液晶画面には余白ができてしまうだろう。これを調整するため、ブラウザはviewportのレンダリング結果を液晶の画面サイズに合うようにズームアップまたはダウンして表示する。
6. <meta name="viewport" content="width=device-width">と指定した場合はviewportの幅は端末やブラウザアプリ毎によって異なる。重要なのはここでも実際の液晶の解像度ではなく360とか580などのスマホらしい小さい値が使われるということだ。

この記事、よくまとまっています。

まとめ

レスポンシブデザインでは、viewportの表記は必須。

基本は以下を追加しておけばよい。

最後まで読んでいただきありがとうござました。
この記事が気に入っていただけたらシェアしてくれると嬉しいです。