こんにちは、Rumiです。
今回はPC用のサイトをレスポンシブにしたはずなのに、Googleではレスポンシブとして認識されない現象について解説していきたいと思います。
- はじめに
- viewportは設定していますか?
- 画面全体の幅はスマホ画面に指定していますか?
- Googleに認識されるまでにはタイムラグがあるのを知っていますか
- まとめ
はじめに
もともとPCサイトしかなかったものを、デザインはそのままにしてレスポンシブ対応にするのってとっても難しいですよね。
ただでさえ難しいのに、できたと思ったらGoogleに読み込まれないと今までの苦労は何だったんだ…となりかねません。
今回は、メディアクエリでレスポンシブの設定をしたにも関わらずレスポンシブにならない(ブラウザの画面の幅を変えても表示が変わらない)現象について、いくつか解決方法を示していきたいと思います。
viewportは設定していますか?
まずは、viewportメタタグを入れているか確認してください!
コードは以下の通りです。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
このコードがタグ内に入っているでしょうか。
このコードがないと、スマホ画面で見たときにもPCと同じレイアウトの画面が出てしまい、せっかくレスポンシブのコードを書いたのに適応されてない!なんてことになってしまいます。古いサイトならなおさらvirewport自体が入っていない可能性がありますので、そこを確認してみてください。
画面全体の幅はスマホ画面に指定していますか?
これは実際に私自身もやらかしてしまったミスなのですが…
そもそも、レスポンシブにする場合は、最初にmax-width, min-widthの指定をします。
この幅の指定がうまくCSSに効いていないと、PCの幅に合わせてレスポンシブデザインを実装していくことになります。
全て完成したと思ったら、最初の幅の指定が間違っていた、なんて悲劇には遭遇したくありません。
なので、メディアクエリでレスポンシブをする際は、vewportの確認の後に必ず幅の指定を確認してください。
検証ツールを開いて、max-widthがスマホ画面サイズ(360~480px)になっていればOKです。
Googleに認識されるまでにはタイムラグがあるのを知っていますか
viewportも画面の幅も合っている。なのになぜレスポンシブの表示にならないんだ…!
とお困りのあなた。
1日待ってみてください。反映されていることがあります。
これは実際に経験したことがあるのですが、Googleが変更を反映させるまでには少し時間がかかります。
私の場合はローカル環境・開発あ環境で確認して問題がなかったので本番環境にupしたらレスポンシブになっていない…と絶望しました。
しかhし、次の日見てみると「あれ、レスポンシブになってる!」ということがありました。
なので、全てをやり尽くしてそれでも反映されない場合は1日待ってみてください。
まとめ
せっかくレスポンシブの指定をしたのに反映されないとかなりショックですよね。
この記事を読んですこしでも解決に近づけることを祈ります!Good Luck🍀
会社のサイト作成・更新を独学でなんとかやってまいましたが
以前は反映されていたのに、PCによって レスポンシブデザインが反映されなくなりました。フル画面でもスマホサイトの特大版になります。もぉダメ( ノД`)シクシク
マウイ様
返信遅れて申し訳ありません!そのサイトはもしかしたらレスポンシブではなく、PCページとスマホページを別々に作成して、htaccessファイルで切り替えているのかな、と思いました。どのような状況か詳しくわかればもう少し詳しくお調べすることができるのですが・・・