レスポンシブデザインの確認が出来るもの、出来ないものの違いについて

Question

こんにちは！
ずっと疑問だったので、もし教えて頂けたらとても嬉しいです。

ChromeのデベロッパーツールでWEBサイトを見ていると、iphone7 など、スマホやタブレットではどの様に表示されるのかを見ることができると思います。

ただ、これをやってもレスポンシブデザインを確認できないサイトというのも存在すると思います。

しかし、そのサイトがレスポンシブ対応していないかというとそんな事はなく、cssにメディアクエリが入っている為、実際にスマホでそのサイトに行けばレスポンシブデザインに切り替わっていて、デベロッパーツールに表示させたスマホの画面とは異なっています。

この、デベロッパーツールから見たときにレスポンシブデザインが表示されるもの、されないものの差というのは、どんなところにあるのでしょうか？

例えば私は、基本的にはレスポンシブデザイン用のcssファイルは作らず、style.cssの下の方に

@media screen and (max-width: 〇〇px) {}

を書いて、レスポンシブ対応をしているのですが、これが良くないのでしょうか？

レスポンシブデザインを作るときにデベロッパーツールから確認できない為、修正をわざわざスマホで確認しながらやっています。
その為、いい方法があれば知りたいです。

よろしくお願い致します。

Comments

[maisumakun]

スマホモードに切り替えてからリロードしてもモバイル表示に変わらない感じでしょうか？

[yoshinavi]

Chromeであれば、UA切替機能がある拡張機能があるので試してみれば良いのでは？

[bariko]

ありがとうございます！そんな良いものがあるんですね！早速調べて、入れてみましたが、バッチリChromeデベロッパーツールでレスポンシブ表示ができました！本当にありがとうございます！

Answer 1

これまで何十とレスポンシブのサイトを作ってきましたけど、
CSSのメディアクエリで条件分岐して表示を変えているのであれば
Chromeのデベロッパーツールでレスポンシブ状態の確認は必ずできます。

Chromeのデベロッパーツールではレスポンシブにならず、
実機でみればレスポンシブになるというのであれば、
おそらくはJSやPHPなどを利用してUA判別をした上で
表示の条件分岐を行うような設計になっているものと思われます。

もしMacをお使いでしたら
試しにChromeではスマホのレイアウトにならないというサイトを、
Safariの開発者モードでユーザーエージェントをiphoneに変更して
閲覧してみてください。実機で見ているのと同じ表示になると思いますよ。

まぁ、具体的なサイトを提示されているわけではないので
あくまで一般論ですが。。。

Comments

[yoshinavi]

どこかにUA判別が入っているのでしょうね。そうでなければ確認できるはずなので。

[bariko]

回答ありがとうございます！Safariの開発者モードでユーザーエージェントをiphoneに変更してやってみました。ちゃんとレスポンシブ表示できました！！
本当にありがとうございます！

[aKusano]

ユーザーエージェント変更で表示が変わったのなら、やはりそのサイトはメディアクエリではなくUA判定を使ってデバイスごとに適用するスタイルを変更する手法を取っていたということですね。
CSSにメディアクエリが入っていたのは、あくまでそれぞれのデバイスのレイアウトごとに
補助的にメディアクエリも使っているのでしょうね。

Answer 2

CSSでレスポンシブ化するならデバロッパーツールで確認可能です。
しかし、Javascriptで分岐・リダイレクトしている場合は不可能な場合があります。
ほかにもPHPを利用している場合は不可能です。

ちなみに

@media screen and (max-width: 〇〇px) {
//この中に〇〇pxまでの端末で表示したい処理を書いてますか？
}

Comments

[bariko]

もちろん、｛｝の中に書いてます！でも、PHPやJavascript 使ってると見れないっていうのは知らなかったです。
という事は、WordPressはレスポンシブデザインをデベロッパーツールからは見れないって事ですよね？

[kyoya0819]

PHPやJavaScriptをページのどこかで使っているからといって見れないと言うわけではありません。レスポンシブの処理に使ってるかどうかです。

[kyoya0819]

WordPressでもCSSで制御しているなら確認可能なはずです（少なくともウィンドウサイズの変更は有効）。

Answer 3

私はデベロッパツールはあくまで仮想であり、100%そのままではないと認識しています。あくまで簡易動作確認用ですね。
きちんとテストをするのであれば実機確認（できれば複数）は避けて通れません。

Comments

[bariko]

やっぱりそうなんですね…私の先輩もそう言ってました。
ただ、ちゃんとレスポンシブ表示がエミュレートされるものとされないものの差が気になって質問しました。

[m.ts10806]

機種による違いもありますし、スマートフォンも色々カスタマイズできるのであまり厳密に追わない方が良いかもしれません。
あくまで簡易確認ですね。