ユーザが使用するディスプレイの解像度に合わせた画面開発
そんな時に役立つものを発見しました
Windows標準のディスプレイ設定を変えなくても
サクッと解像度を変更することができます
Window ResizerをChromeに追加
Window Resizer - Chrome Web Store
Resize the browser window to emulate various screen resolutions.
chromewebstore.google.com
まずは拡張機能を追加です
拡張機能のアイコンをクリックしましょう
拡張機能の小ウィンドウが出てきます↓
ピン止めすると URLバーの横に固定表示されます
②の「OK, got it!」をクリックしましょう
Preset（規定値）を変更する
規定値以外のサイズも使いたい場合
デフォルト設定されているサイズだけでは対応できないケースも多々あると思います
また、サイズ変更と言っても、一時的に試したいサイズと頻繁に使用するサイズ等あるかと思います
そういったニーズにも応えられる機能が付いてました！
一時的なサイズ変更
一時的にサイズ指定したい場合は小窓の下部にある緑色のエリアに
縦横サイズを指定して矢印ボタンを押すと切り替わります
ちなみに、Resizeの下に表示されている「window」をクリックすると
「viewport」に切り替わります
- window : Chromeブラウザのwindowサイズを指定
- viewport : Chromeブラウザ内の表示エリアのサイズを指定
よく使うサイズへ既存の規定値を変更
小窓の右側に表示されている歯車マークをクリックします。
左のメニューにある「presets」を選択しましょう。
ツールを使って快適な作業環境を構築しましょう
こういったツールをうまく活用して、ちょっとした手間を省けるようになると
小さなストレスが軽減されて、気持ちよく作業が進められますね。
私も個人的に使用する拡張機能を作ってみようかなと思っています。。。
今回、WindowResizerの導入部分をご紹介しましたが、
hotkeyの設定もできるので、興味のある方はガンガン使いこんでいきましょう！
では！
