スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 “ モバイル端末上で、Web ページがどのように表示されるのか ” ということを確認できるようにする Chrome 拡張 「Responsive mobile view」

今日は、Web ページが “ 各種モバイル端末上で、どのように表示されるのか ” ということを
確認できるようにする Google Chrome 拡張機能 を紹介しようと思います。



エミュレートする端末を選択する
エミュレートする端末を選択する

選択した端末での表示が、エミュレートされる
選択した端末での表示が、エミュレートされる

横向き表示にも対応
横向き表示にも対応


「Responsive mobile view」 は、Chrome 上で動作するモバイル端末エミュレーターです。

  1. Chrome ウインドウ内に、各種モバイル端末と同じの解像度の枠を作成し、
  2. Web ページに対して、選択したデバイスと同じ User-Agent を送信する
ことで、アクティブなタブに表示しているページが、“ モバイル端末上で、どのように表示されるのか ”
ということを確認できるようにしてくれます。
エミュレート画面内では普通にブラウジングを行うことができ、また “ 端末を横向きにした時の表示 ”
もエミュレートできるようになっていたりします。

エミュレート先として選択できるデバイスには、次のようなものがあります。
( 2013 / 7 / 21 時点)
  • Xperia X10 Mini pro (Android)
  • iPhone 4 (iOS)
  • iPhone 5 (iOS)
  • Nokia Lumia 920 (Windows Mobile)
  • Samsung Galaxy (Android)
  • Nexus 7 (Android)
  • iPad Mini (iOS)
  • iPad 1-3 (iOS)
  • Laptop / Desktop
モバイル向けのWeb 開発を行っている人にはもちろん、スマートフォンでしか表示できないサイトを
見たい時... などにも便利。


 その他の拡張機能
 Google Chrome 拡張機能

使い方は以下のとおりです。

  1. Responsive mobile view」 をインストールします。

  2. ツールバー上にアイコン ( ) が登録されます。


  3. モバイル端末での表示を確認したいページを開きます。


  4. ツールバー上の アイコンをクリック。


  5. 「Responsive mobile view」 専用の画面が表示されます。
    この画面の上部にあるプルダウンメニューをクリックし、エミュレートしたいデバイスを
    選択します。

    エミュレートする端末を選択する


  6. すると、先ほど表示していたページが表示されます。

    選択した端末での表示が、エミュレートされる

    「Rotate」 ボタンをクリックすることで、画面の向きを変えることも可能となっています。
    ( 「Rotate」 ボタンを押すたびに、縦 / 横 と切り替わる)
    横向き表示にも対応



Appendix

最近の番外ソフト

月別ソフト

広告


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。