Chromeデベロッパーツールで、デバイスをスマホ指定しているのに、PCサイトが表示されることがある理由は?

投稿者: Anonymous

やりたいこと
・スマホ閲覧時における「WebサイトのHTMLソースコード」確認

やっていること
・Chromeデベロッパーツールで、デバイスをスマホ指定して、PCサイトで確認
http://www.atmarkit.co.jp/ait/articles/1403/20/news050.html

状況
・サイトによっては、「Chromeデベロッパーツールで、デバイスをスマホ指定してリロード」しても、PCサイトレイアウトで表示されることがあります
※スマホ実機で確認すると、スマホレイアウトで表示されます

質問
・なぜこの現象が起こるのでしょうか?
・ユーザエージェント偽装を防ぐような何らかの対策がサイトに施されているのでしょうか?
・できればその方法を知りたいです
・また、スマホレイアウトがスマホ実機でしか表示されないのであれば、スマホでソースコードを確認したいのですが、可能でしょうか?
・ネットで検索した限りでは、USBで接続すればPC画面上で確認できるみたいですが、スマホ単独ではChromeデベロッパーツールは起動不可ということでしょうか?

解決

偽装を見抜かれたというより、UAで判断していないというだけのことでしょう。

例えば携帯会社はスマホからインターネットにアクセスする際のIPアドレス帯域を公開しています。アクセス制御などで厳格に判断したい場合は、このあたりを見ることが多いのではないでしょうか。

https://www.nttdocomo.co.jp/service/developer/smart_phone/spmode/index.html
https://www.support.softbankmobile.co.jp/partner/home_tech1/index.cfm
http://www.au.kddi.com/developer/android/kaihatsu/network/

とはいえこの方法ではテザリングがスマホ判定になり、逆にWiFi接続のスマホがPC判定になる、という問題があります。端末に合わせて見た目を変えたいだけなら、ユーザーからは不便だと思います。

あとはJavascriptで判定してもいいのであれば、navigation.platformを見るとか、対象の端末にしか実装されていないAPIだとか、アプリを呼び出すURIスキームを試す、なんて方法もあるかと思います。

具体的なサイトが示されていないので、一般論としてはこんなところかと。

スマホでソースコードを確認したい

Android版のChromeで確認した限りでは、URLの頭に view-source: を付けることでソースを表示できるようです。PC版と同じですね。

あるいは開発者ツールを使いたいなら、Firebug Lite をブックマークレットで読み込むのも手です。

http://web-tan.forum.impressrd.jp/e/2014/09/30/18334

回答者: Anonymous

Leave a Reply

Your email address will not be published.