カテゴリー
小ネタ

PCブラウザでスマホサイトの確認をするには??ユーザーエージェントの切り替え方法。

スマホ専用のサイトは、そのままPCでアクセスできるものもあるかもしれませんが、たいていPCからアクセスすると、スマホ用のサイトがそのまま見られず、PCサイトにリダイレクトされてしまいます。
また、スマホ専用のサイトを制作中に、大体の見た目をPCで作業しつつ確認したいことがあると思います。
エミュレーターを利用することもできますし、iPhoneとMac用Safariの組み合わせなら要素を調べるツールも使えて便利ですが、スマホじゃなくて、PCのブラウザでそのまま確認したい!というときに使える小技です。

MacのSafariの場合

まず、メニューバーに「開発」メニューを表示させます。

スクリーンショット 2015-08-13 16.07.16

環境設定を選んで、出てきた画面(下図)の「詳細」タブを選択。
下のほうにある、「メニューバーに開発メニューを表示」にチェックを入れる。

スクリーンショット 2015-08-13 16.09.50

それでこのウインドウを閉じます。
これでメニューバーに「開発」が表示されたはず(されない場合はブラウザを再起動してみてください)

開発メニューをクリックし、ユーザーエージントを選ぶとさらに装うユーザーエージェントの種類が表示されます。

スクリーンショット 2015-08-13 16.14.20

選択して変更が可能です。
ユーザーエージェントを変更した場合、そのとき開いていたひとつのタブのみに適用されますので、他のタブは影響を受けません。リロードしてもユーザーエージェントは変更されたままです。

また、この「開発」メニューはキャッシュを削除・無効にしたり、jsを無効にしたりなどいろんな機能があるので一度一通りためしてなにができるか確認してみてください。
筆者はMac環境で確認していますが、WindowsのSafariでも同じように使えると思います。多分。(どなたか知っていらっしゃったらお教えくださいませ)

Macのchromeの場合

まず、画面で右クリックして、要素の検証を選択

スクリーンショット 2015-08-13 16.33.43

ツールバーの右端あたりにある、>__ こんな感じのボタンをクリック。

スクリーンショット 2015-08-13 16.34.40

画面の下のほうにタブのセットが追加されるので、その中のEmulationタブをクリック。なんか文字列が出てくるようなら、その中にあるスマホ?マークをクリック。

スクリーンショット 2015-08-13 16.35.23

すると、エミュレーターっぽい画面になります。

スクリーンショット 2015-08-13 16.35.51

あとは見たいユーザーエージェントを選ぶだけ。

スクリーンショット 2015-08-13 16.36.10

よく見たら上のほうのツールバーにも?マークが出ていて、これをクリックしても切り替えが可能ならしい。時々、「あれ、変わってない」ってときはそのまま再読み込みすると変わることも(なんかメッセージ出たりする)。

Safariはアップル製品だけだったけど、chromeはさすが、アンドロイドもカバー。

さて、そろそろお気付きのことと思いますが、あくまでこれはユーザーエージェントを変更しているだけなので、実際のブラウザや端末のバグやエラーを再現できたりはしません。

基本的には実機で動作確認すべきですし、あくまで補助的な使い方です!ということも合わせて覚えておいてくださいませ!

お茶を濁す。

エージェント
agent
① 当事者に代わって物事を処理したり,意思表示をしたりする者。代理人。代行人。代理店。代理業者。
② スポーツ選手の契約交渉や,選手が競技に集中できるような環境づくりを仕事とする者。代理人。
③ 諜報活動を行う者。諜報部員。スパイ。秘密情報員。工作員。
④ コンピューターのユーザーが連続した操作をしなくても,自律的に情報収集や状況判断を行い,適切な処理動作を実行する機能。また,そのソフト-ウエア。

へぇ・・・・

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です