3

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

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

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

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

1
  • 1
    あくまで想定ですが、携帯各社が使用しているホスト名やIPアドレスを見ている可能性がありますね。であれば、テザリングで確認してみるのも一つの手かもしれません。
    – otak-lab
    Commented 2015年12月20日 13:34

2 件の回答 2

3

偽装を見抜かれたというより、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

1

User Agentの他にも、判別に使用される要素はあります。
例えば、HTMLのBattery APIを利用する方法です。
携帯機器やラップトップだとサポートされていますが、デスクトップだと使えないですね。
実機を使うのが一番いいかと。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。