LoginSignup
0
0

ChromeのDevToolsでスマホ表示ができなかったので対処法

Last updated at Posted at 2023-07-12

結論

Firefoxの開発者ツールを使う。ちなみにEdgeは無理だった。

追記(2023/07/12)
コメントにて、Chromeでもシークレットブラウジングを使って検証すると違った結果が得られる可能性があると教えていただきました。
スマホ向けWebページの検証を行う方法の「PCブラウザのデベロッパーツール内モバイルモードを使用してシミュレートする方法」の手順で行うとChromeでもうまく動作するかもしれません。
コメントも参照してください。

経緯など(蛇足)

ChromeのDevTools(F12で出てくる開発者ツール)でモバイルエミュレーターを使うと、(サイトが対応していれば)PCからスマホ向けの画面を見られる。
しかしある日、スマホ向けの画面を見たいのに、画面サイズを指定してもなおPC向けの画面が表示されることがあった。
いろいろ考えた結果、Chromeの開発者ツールだからダメなのではと思い、Firefoxの開発者ツールを使った。そうしたら無事スマホ向け画面が表示された。ちなみに、「Edgeは内部的にはChrome」みたいに聞いたことがあったのでEdgeで試してみたら案の定ダメだった。

参考

https://qiita.com/aqril_1132/items/4789bc12a511136d8bfa
このページに、(Chromeに限らず)ブラウザの開発者ツールのエミュレート機能について、

基本的に画面幅を変えた上でユーザーエージェント情報を偽装するだけの機能なので過剰な信用は禁物。油断するとヒドい目に遭います。

と書いてあったので、Chromeの開発者ツールに問題があるのではと考え、Firefoxを試した。

0
0
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0