近日、nexus7やkindleFireなどタブレットの発売が話題になっていますね。

スマホもどんどん普及していって、

徐々にフィーチャーフォンとスマートフォンの二台持ちから、

スマートフォンとタブレットの二台持ちにシフトしていく人も増えていきそうですね。

Webサイトはそれらに合わせて、作成していくことも増えていくでしょう。

とはいえ、確認を都度、端末でしていくのは中々、手間がかかるというもの。

そこで今回はPCの各ブラウザで使えるユーザーエージェントと画面サイズ変更の紹介です。

firefox　《レスポンシブデザインビュー》[サイズ変更]

起動方法

　　firefoxメニュー　→　Web開発　→　レスポンシブデザインビュー

起動はこれだけです。起動すると、以下のとおり。

○使用方法

画像の左上にあります既定のサイズからサイズ変更を行ったり、通常のPCでブラウザサイズを操作するように、右端、右下端のマークをドラッグで自由にサイズ変更が行えます。

view-portを使用した場合など、便利です。

google chrome 《Developer tool》[User Agent変更、サイズ変更]

起動方法

　　ブラウザメニュー　→　ツール　→　Developertoolを　開く

　　→　Developer tool UIの右下にある歯車をクリック　→　overridesタブ

User Agent はUserAgent変更。

Device metricsでサイズ変更です。

Emulate touch eventsはタッチイベントも模すかどうか。

○使用方法

使用したい項目にチェックを入れて、更新で反映。

UserAgentの中には携帯端末のものを選択すると、自動的にサイズも変更されるものあります。

また、サイズ変更だけで使用することも可能です。

IE9 《開発ツール》 [User Agent、サイズ変更]

起動方法

　　ブラウザ画面右上の歯車マーク　→　開発者ツール（F12）

　　ツール「サイズ変更」「ユーザーエージェント文字列の変更」

○使用方法

今までのブラウザの二つのとおり、任意のものを選択して更新するだけ。

※注意点–IEをサイズ変更すると、ブラウザのウインドウサイズごと小さくなりますので注意。

safari(mac版)《開発ツール》[User Agent]

起動方法

　メニューバーの開発メニュー　→　ユーザーエージェント

　※開発メニューが表示されていない場合は　safariの環境設定から　→　詳細　→　『開発メニューを表示』を選択して表示できます。

○使用方法

任意のUser Agent を選択し更新です。

opera12について

オペラ12標準でUA変更などが開発には見当たりません。

しかし、各サイトごとに、「ブラウザの識別」というものが行えるようになっております。

これでUser Agent　の切り替えができます。

○使用方法

閲覧中のWebサイトで右クリック　→　サイトごとの設定を編集　→　ネットワークタブ　の　ブラウザの識別

各ブラウザのバージョンは

IEはIE9となり

firefoxは　バージョン４　になるようです。

その他、拡張機能でもいろいろとできるようですので、自分にあったツールを選んで

よりよい制作環境の参考になればと思います。