クグれば大体の事は解決する。多分

さて、やっとこまんがの表示を詰める段階になって、

レスポンシブにしていて困ったことが。

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に書いておけばいいよね。