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

0
contrail

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

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

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

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

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

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

1Safariの「環境設定」を開く。

2上のアイコンから「詳細」を選択。

3出てきた画面の「メニューバーに”開発”メニューを表示」をチェック。

4上のメニューバーに「開発」てメニューが追加されます。

5その「開発」の中の「レスポンシブ・デザイン・モード」を選択

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

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

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

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

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

RELATED ITEMs
USB急速充電器
USB急速充電器

Anker( no date )

amazon
0

RELATED POSTs

SELECT ITEMs [ AMAZON ]

COMMENTs 0

コメントを残す

・メールアドレスは非公開です
・htmlタグは使えません
・URLは無効となります
・name と comment( * )は必須です