【Dreamweaver】デバイスでプレビューではレスポンシブなのに、実際にアップロードするとレスポンシブにならないとき

はじめに

入社して2ヶ月ほどたちました。別の方が5年ほど前に作った自社サイトをスマホでも見やすくしてほしいということで、デザインはそのままに簡単にレスポンシブ化してみました。

Dreamweaverで編集してQRコードを読み取りデバイスでプレビューを使って検証していました。よし、OKということでプッシュしたのですが、実際にスマホでアクセスしてみてもPCビューのまま・・・。

どのように対応したのか?

簡単なことだったのですが、viewportの設定を確認してみました。そしたら、案の定そもそも記述がない…!

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

で、これを追記したらちゃんとスマホでもちゃんとレスポンシブになりました。

なんで気が付かなかったのか?

会社ではDreamweaverを使って作られたサイトが多いので、既存サイトはなんとなくDreamweaverで編集していました。デバイスプレビュー機能は結構便利だなと思って使っていたのですが、viewportを設定していなくてもメディアクエリがちゃんと効いてしまうようで、それで気がつくのが実際にアップロードしたあとになってしまいました。

おわりに

今回学んだことは、2つ。

1つ目は、PCではちゃんとメディアクエリ効いて画面幅が狭くなってもレスポンシブ表示されるのに、スマホではうまく表示されないときには、veiwportを確認すると良い。

そしてもう一つは、Dreamweaverのデバイスでプレビューは便利だけどveiwportに注意!