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

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

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

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

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

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

01. Safariの「環境設定」を開く。
02. 上のアイコンから「詳細」を選択。
03. 出てきた画面の「メニューバーに”開発”メニューを表示」をチェック。
04. 上のメニューバーに「開発」てメニューが追加されます。
05. その「開発」の中の「レスポンシブ・デザイン・モード」を選択

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

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

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

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

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

amazonで商品情報を見る
Anker Astro E1 5200mAh モバイルバッテリーAnker Astro E1 5200mAh モバイルバッテリーAnker(発売日:2015年9月)
Anker PowerCore 10000mAh モバイルバッテリーAnker PowerCore 10000mAh モバイルバッテリーAnker(発売日:2015年12月)
Anker PowerCore 13000mAh モバイルバッテリーAnker PowerCore 13000mAh モバイルバッテリーAnker(発売日:2015年9月)
2016年 08月 17日(水)
apple > maccomments 0

comments 0

コメントを残す

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