ホーム   WEBデザイン   Chromeでデバイスごとの画面サイズチェックできるWindow Resizer。

 WEBデザイン    446

 

Chromeでデバイスごとの画面サイズチェックできるWindow Resizer。

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

ChromeユーザーでなおかつWEBデザイナーであれば、この機能拡張は必須でしょう。レスポンシブをチェックするのに「Window Resizer」が便利です。

スポンサーリンク

Chromeでも各種デバイスのチェックが可能だが。。。

Chromeにもデフォルトでデベロッパーツールから各種デバイスでの表示のチェックが可能ですが、表示もモタツクし操作しづらい。

0

スポンサーリンク

拡張機能、Window Resizerをインストール。

そこでWindow ResizerをChromeにインストールしましょう。
まずはChromeを立ち上げ、Window Resizerのインストールのページへ。

「+CHROMEに追加」をクリック

1

「Window Resizerを追加しますか?」というダイアログが出てきますので、拡張機能を追加をクリック。

2

Window Resizerが追加されました。右上のWindow Resizer(NEWアイコン)をクリック。

3

「BETAバージョンにトライしてみて」っつうアラートが出てきますが、無視して「OK, got it!」をクリック。

4

すると各デバイスに切り替えるナビゲーションがでてきます。下の方にある「Edit presets」をクリックしてみましょう。

5

ここにAdd new resolutionを追加しておくことも可能です。よく使うサイズは予め登録しておきましょう。

6

スポンサーリンク

コメント

プロフィール

bbb

WEBデザインと輸出入業してます。海外関連、グルメ関連をメインに記事にしています。キュレーションへの投稿、ページのいいねとシェアに喜びます。個人事業の方を応援します!

I'm web designer, and export-import business also. Feel free you can add me on Facebook

 https://www.facebook.com/bbp.jp