MacやWindowsでWebブラウザごとやIEのあらゆるバージョンの動作や表示を確認する

Web開発をしているとMacやWindows、またChromeやFirefox、Safari、Microsoft Edge、そしてIEのあらゆるバージョンで動作確認・表示確認をすることがあります。

私はMacとWindowsの二刀流なのであまり苦労することはないですが、どちらかのコンピュータだけという方は大変だと思います。
またIEもバージョンで癖がありますのでね。

そういった場面で使えそうなのがブラウザが開発者ように用意してくれたツールです。
今回ご紹介する方法は、100%正確に確認できるものではないですがある程度の動作確認・表示確認ができるものです。

 
Google ChromeやFirefoxはどちらのOSでも簡単にインストールできるので別に問題ありません。
問題はMacユーザーがIEの確認をする時、WindowsユーザーがSafariの確認をする時でしょうか。

 
それでは見ていきましょう。

 

Macのブラウザ確認

Macの場合は、標準で入っているSafariを使います。
開発用のツールを使っていくわけですが、デフォルトの設定だと今回の確認ができませんので設定をちょっとだけ変更します。
ツールバーの「Safari」から「Preferences(環境設定)」へいきます。

Macのブラウザ確認01

 
Advanced(詳細)」のタブから一番したの「Show Develop menu in menu bar(メニューバーに開発メニューを表示)」にチェックを入れます。
これだけです。

Macのブラウザ確認02

 
設定で開発メニューを表示させましたので、ツールバーの「Develop(開発)」から「User Agent(ユーザエージェント)」といけばいろんなブラウザの環境の確認ができます。

Macのブラウザ確認03

 
Macユーザーが気になるのはMicrosoft EdgeとInternet Explorerでしょう。
IEは7〜11まであります。

 

Windowsのブラウザ確認

Windowsの場合は標準で入っているMicrosoft EdgeまたはInternet Explorerで確認できます。

ショートカットキーとしてキーボードの「F12」を押せばデベロッパーツールが表示されます。
デベロッパーツールの「エミュレーション」のタブからモードの部分で変更することができます。

Windowsのブラウザ確認01

 
Internet Explorerは8〜11まで確認できます。
さすがにIE7以下は切り捨てられていますね。
SafariはiPadのモードのようです。PCとさほど変わらないかと思います。
シェアは低いですがOperaもあります。

Windowsのブラウザ確認02

 
ちなみにIE11では、おなじくデベロッパーツールを使い「エミュレーション」からモードを変更します。
またはツールバー右の方にもモードを変更するアイコンがありますのでそちらからでも。

Windowsのブラウザ確認03

 
IE11ではIE5まで確認できます。
なぜかIE6がないのが気になりますが。
まぁここらへんはバグだらけなので別に気にならないかと思います。

 

まとめ

今回ご紹介した方法は100%正確に確認できるものではないので、実機に実際に入っているもので確認することが一番です。
Web開発をする方はなるべくMacとWindowsの二刀流でいくのがいいですね。

サブのコンピュータは確認程度でしたら安いものでも良いかと。