Safariのレスポンシブ・デザイン・モードが便利♪

このブログ（soraizm）をPCとスマホの両方で表示できるように
流行にのっかってレスポンシブ化したのだけれど（笑）、
その作業過程でSafariの「レスポンシブ・デザイン・モード」が大活躍♪

このモードを使えばちまちまスマホ（実機）で確認しなくても、
作業中のMacでそのままスマホの見栄えを確認できてしまいます！

まぁ、MacのモニタがRetinaじゃなければ、
最終的に実機での確認は必要なんだけどね〜。
特にテキスト関連は普通のPCモニタじゃボロボロだし…（汗）。

それでもレイアウトやJavaScriptの動きなどを
作業している環境の中（画面内）でサクッと確認できるのは
かなり作業負担を軽減してくれますよ♪

正面のPCモニタと下に置いたスマホの画面を交互に繰り返し見るのって、
意外と疲れるし集中力が切れやすいんですよね…（汗）。

モードの出し方は簡単で…

このモードはブラウザのウインドウ幅を変えることなく
表示画面のみの幅を好きなサイズに変えられるし、
しかもLandscape（ヨコ）とPortrait（タテ）も切り替え可能。
更に、UserAgentも選択できてしまうってトコが便利なんだよね〜♪

まだ試してはいないけど、
UserAgentの選択メニューの1番下「その他」で
任意のUserAgent文字列も追加できるっぽいし。

唯一の残念な点は選択できるiPhoneの画面サイズが
スクロールバーの幅を計算に入れてないってトコかな…。
実際のiPhoneのスクロールバーはブラウザの前面（？）に表示され、
コンテンツの表示幅に影響を与えていないですもんね〜。

例えば… セットされている「iPhone 5s」を選んだ場合、
本当はヨコ幅320pxが正解なんだけど、
スクロールバーの15pxが侵食して305pxで表示されてしまう（涙）。

まぁ、途中経過の確認程度ならこれでも十分なんだけどね♪