ブラウザ

【Chrome拡張機能】他のブラウザはどんな感じで表示されるか一発で一覧確認する方法

他のブラウザはどんな感じで表示されるか一発で確認する方法

指定したサイトのページが他のブラウザではどんな感じで表示されるか、1クリックで一覧表示してくれるChromeの拡張機能「Multi-browser Screenshots」紹介です。

MacでIE、Edge、Android。WindowsでSafari、iPhone、iPadなどの確認ができます。
但し、各ブラウザは一覧表示はされますが、スクリーンショットの画像です。

Multi-browser ScreenshotsMulti-browser Screenshots

一覧表示されるブラウザ

Browser screenshotsで一覧表示されるブラウザは以下の通り。
大抵の場合のチェックポイントはEdgeとIEかと思います。

  • Edge
  • Internet Explorer 11/10/9/8
  • Chrome
  • Firefox
  • Safari 9.1 (OS X El Capitan)
  • Google Nexus 6 (Android 5.0)
  • Google Nexus 9 (Android 5.0)
  • iPad Air (iOS 8.3)
  • iPhone 6 Plus (iOS 8.3)

おそらくHTML5、CSS3等で作られたサイトだと、IE8、IE9、IE10あたり大体レイアウトが崩れます。ただこれらのブラウザはサポート終了して時間もたっていますし、よほどの理由が無い限り無視していいブラウザです。

無視できないのはIE11とEdgeです。

以前に比べれば利用者は少なくなったと言え、どちらもWindows標準ブラウザだけに未だに普通に使っているいるユーザーも多いですし、自遊空間や快活クラブなど全国チェーンのネットカフェですら未だにIE11がデフォルトブラウザとなっています。

インストール方法

インストールは、Chromeウェブストアからダウンロード&インストールします。

Multi-browser Screenshots(Chrome拡張機能)

使用方法

Multi-browser Screenshotsの使い方
  • STEP.1
    ページを表示させる
    まずはチェックしたいページを普通に表示させます。
  • STEP.2
    アイコンをクリック
    ツールバーから「Multi-browser Screenshots」アイコンをクリック。

しばらくすると各ブラウザのスクリーンショットが一覧表示されます。
(数分かかる場合もあります)

結果画面には1画面しか表示されませんが、
「VIEW LARGE >」をクリックするとスクロールすると表示される下部の部分も全て表示することができます。

まとめ

以上、1クリックでいろんなブラウザのスクリーンショットをとってくれるChrome拡張機能を紹介しました。

クロスブラウザシミュレーターではなく、単にスクリーンショットを一覧表示してくれるものですが、地味に使える拡張機能のひとつだと思います。

因みにこの拡張機能は、現在のURLを以下のサイトへ渡しているだけなので、直接以下のサイトから、URLを入力しても同じ結果となります。

Browser screenshots

サイト制作側からすると、とにかくIEが曲者です。
IEはダメブラウザと認識する人も多いのですが、なにせWindows標準ブラウザということで未だ使用している人も多く、完全無視できないのが現状です。
関連記事

COMMENT

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