スマホ専用のサイトは、そのままPCでアクセスできるものもあるかもしれませんが、たいていPCからアクセスすると、スマホ用のサイトがそのまま見られず、PCサイトにリダイレクトされてしまいます。
また、スマホ専用のサイトを制作中に、大体の見た目をPCで作業しつつ確認したいことがあると思います。
エミュレーターを利用することもできますし、iPhoneとMac用Safariの組み合わせなら要素を調べるツールも使えて便利ですが、スマホじゃなくて、PCのブラウザでそのまま確認したい!というときに使える小技です。
MacのSafariの場合
まず、メニューバーに「開発」メニューを表示させます。
環境設定を選んで、出てきた画面(下図)の「詳細」タブを選択。
下のほうにある、「メニューバーに開発メニューを表示」にチェックを入れる。
それでこのウインドウを閉じます。
これでメニューバーに「開発」が表示されたはず(されない場合はブラウザを再起動してみてください)
開発メニューをクリックし、ユーザーエージントを選ぶとさらに装うユーザーエージェントの種類が表示されます。
選択して変更が可能です。
ユーザーエージェントを変更した場合、そのとき開いていたひとつのタブのみに適用されますので、他のタブは影響を受けません。リロードしてもユーザーエージェントは変更されたままです。
また、この「開発」メニューはキャッシュを削除・無効にしたり、jsを無効にしたりなどいろんな機能があるので一度一通りためしてなにができるか確認してみてください。
筆者はMac環境で確認していますが、WindowsのSafariでも同じように使えると思います。多分。(どなたか知っていらっしゃったらお教えくださいませ)
Macのchromeの場合
まず、画面で右クリックして、要素の検証を選択
ツールバーの右端あたりにある、>__ こんな感じのボタンをクリック。
画面の下のほうにタブのセットが追加されるので、その中のEmulationタブをクリック。なんか文字列が出てくるようなら、その中にあるスマホ?マークをクリック。
すると、エミュレーターっぽい画面になります。
あとは見たいユーザーエージェントを選ぶだけ。
よく見たら上のほうのツールバーにも?マークが出ていて、これをクリックしても切り替えが可能ならしい。時々、「あれ、変わってない」ってときはそのまま再読み込みすると変わることも(なんかメッセージ出たりする)。
Safariはアップル製品だけだったけど、chromeはさすが、アンドロイドもカバー。
さて、そろそろお気付きのことと思いますが、あくまでこれはユーザーエージェントを変更しているだけなので、実際のブラウザや端末のバグやエラーを再現できたりはしません。
基本的には実機で動作確認すべきですし、あくまで補助的な使い方です!ということも合わせて覚えておいてくださいませ!
お茶を濁す。
エージェント
agent
① 当事者に代わって物事を処理したり,意思表示をしたりする者。代理人。代行人。代理店。代理業者。
② スポーツ選手の契約交渉や,選手が競技に集中できるような環境づくりを仕事とする者。代理人。
③ 諜報活動を行う者。諜報部員。スパイ。秘密情報員。工作員。
④ コンピューターのユーザーが連続した操作をしなくても,自律的に情報収集や状況判断を行い,適切な処理動作を実行する機能。また,そのソフト-ウエア。
へぇ・・・・