mokmal time

日常感じたことや、考えたことなどを忘れないようにメモするブログ。

スマホではこういう風に見えてるんだ!PCでスマホの表示を確認するにはChromeプラグイン『user-agent switcher』がナイス‼︎

   

medium_6777002055

ブログのレイアウトなどをカスタマイズした時にスマホで見た時にどう表示されているか確認するのってみなさんどうされていますか?

スマホから直接見るのって以外と手間で毎回、

メンド〜だなぁ

って思ってました。

Chromeの標準機能で確認する方法もありますがこのブログはSTINGER3を使っているので上記方法では画面サイズが変わるだけでスマホ表示されません。

もっとかんたんに確認できないかと色々し探しているとChromeのプラグインでナイスなものがありました。


SPONSORED LINK

photo credit: jenny downing via photopin cc

スマホ表示とPC表示を簡単に比べられるプラグイン。『user-agent switcher』


ua1

コレはすっごく簡単にスマホ画面が確認できます。

簡単にできる操作方法

プラグインをインストールして有効にすると、ブラウザの右上にボタンが表示されますのでそれをクリックします。 ua2

あとは表示したいスマホを選ぶだけです。

ua3

選んだ後は画面を小さくすればオッケーです。d(^_^o)

めっちゃ簡単!!

ちなみ右クリックでもこんな感じで簡単に表示させることもできます。 あらためてmacで右クリックを有効すればかなり便利だと思いました。

ua8 たった2分!MacのマウスをWindowsと同じように”右クリック”マウスに変身させる方法

これもナイス‼︎新しいスマホにも対応する方法

このプラグインのすばらし….ナイスな機能が新しくリリースされたスマホにも対応できるところです。

デフォルトではiOS5までは対応していますが、それ以降のOSは一覧にありません。 なので、自分で対応させるべく追加してみました。

まずこの画面で①groupをiOSにして、②新しいuser agentをクリックします。

ua5

nameにiOS7と入力してその下にuser agentを入力します。

ua6

user agentのコードはこちらを参考にしました
参考:web showcase〜ユーザーエージェント一覧

新しく作成した項目が追加されました。これでオッケーです^_^

ua4

こんな感じでスマホ表示とPC表示を見比べることもできます。

ua7

まとめ

STINGER3だとPCとスマホで表示する内容が異なるのでこういった使い方はかなり役に立ちます。

……にしてもススマホで見た時に広告がくっつくのは何故だろう。

 - chrome

SPONSORED LINK

SPONSORED LINK

SPONSORED LINK

SPONSORED LINK
  • このエントリーをはてなブックマークに追加
  •  
  •  

Message

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

  関連記事

意外と知らない人が多いなぁ−Google Chorme起動時に複数サイトを同時に起動する方法とその活用メリット−

お仕事上でよくPCの環境のセッティングやその他周りの不具合の調整などをやっていま …