質問: こんにちは! ずっと疑問だったので、もし教えて頂けたらとても嬉しいです。 ChromeのデベロッパーツールでWEBサイトを見ていると、iphone7 など、スマホやタブレットではどの様に表示されるのかを見ることができると思います。 ただ、これをやってもレスポンシブデザインを確認できないサイトというのも存在すると思います。 しかし、そのサイトがレスポンシブ対応していないかというとそんな事はなく、cssにメディアクエリが入っている為、実際にスマホでそのサイトに行けばレスポンシブデザインに切り替わっていて、デベロッパーツールに表示させたスマホの画面とは異なっています。 この、デベロッパーツールから見たときにレスポンシブデザインが表示されるもの、されないものの差というのは、どんなところにあるのでしょうか? 例えば私は、基本的にはレスポンシブデザイン用のcssファイルは作らず、style.cssの下の方に ``` @media screen and (max-width: 〇〇px) {} ``` を書いて、レスポンシブ対応をしているのですが、これが良くないのでしょうか? レスポンシブデザインを作るときにデベロッパーツールから確認できない為、修正をわざわざスマホで確認しながらやっています。 その為、いい方法があれば知りたいです。 よろしくお願い致します。
回答: CSSでレスポンシブ化するならデバロッパーツールで確認可能です。 しかし、Javascriptで分岐・リダイレクトしている場合は不可能な場合があります。 ほかにもPHPを利用している場合は不可能です。 ちなみに ``` @media screen and (max-width: 〇〇px) { //この中に〇〇pxまでの端末で表示したい処理を書いてますか? } ```