さて、やっとこまんがの表示を詰める段階になって、 レスポンシブにしていて困ったことが。 Dreamweaver上では、スマホ表示で問題がないのに、 デベロッパーツールで確認しているとレスポンシブ出来てない。 スマホで実機テストしてもやっぱりおかしい。 具体的には、スマホ用のレイアウトが適用されず、 PC画面のレイアウト表示がされているのだ。 コードは特に問題がなさそうなので困った。 Dreamweaverで画面幅を変更して、ちゃんとPCとスマホのデザインに可変されているのを確認。 Dreamweaverでは意図したレイアウトが出来てるのにどうして?と調べてみたら どうやらスマホにはPC画面と同じように表示しちゃう機能があるらしい。 (バッサリとした説明だけど) で、一行魔法の言葉を書けば解決するらしい。 それが、これ。↓ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> メタタグなので、場所はここらへん。 これだけで画面が整った瞬間はとても嬉しかったです。 レスポンシブスマホ困ったあるあるみたいなので、ぜひ参考に。 これからはあらかじめ全部のHTMLに書いておけばいいよね。