楽しくiPhoneライフ!SBAPP

Apple製品全般の最新情報やアプリのレビューを毎日お届け!

【OS X El Capitan】実際の画面サイズでWEBを確認できるレスポンシブ・デザイン・モードの使い方

cat (1)
スポンサードリンク

OS X El CapitanのSafari 9の開発メニューに、「レスポンシブ・デザイン・モード」が追加されました。
レスポンシブ・デザイン・モードでは、ユーザーエージェントの偽装に加え、WEBデザインやファーストビューをiPhone 6などの様々な機種の画面サイズで、プレビューですることが出来ます。
WEB制作をされている方やブログを運営されている方であれば、役立つシーンもあるのではないでしょうか。

レスポンシブ・デザイン・モードで再現できる画面サイズ

レスポンシブ・デザイン・モードでは、以下の機種と画面サイズでプレビューすることができます。

  • iPhone 4s
  • iPhone 5s
  • iPhone 6
  • iPhone 6 Plus
  • iPad mini3
  • iPad Air 2
  • 800×600
  • 1366×768
  • 1920×1080

レスポンシブ・デザイン・モードの使い方

レスポンシブ・デザイン・モードを使うには、Safariの「環境設定」から開発メニューを表示させる必要があります。
th_1

「メニューバーに”開発”メニューを表示」にチェックを入れる。
th_2

レスポンシブ・デザイン・モードで表示したいタブを開いた状態で、開発メニューの「レスポンシブ・デザイン・モードにする」をクリック。
th_3

様々な機種の画面サイズでWEBページをプレビューすることが出来ます。
※設定変更後にデザインが崩れる場合は、リロードしてください。
th_4

プリセットのユーザーエージェントは、以下のようになっていました。
th_6

プレビューの文字が霞んで見辛い場合は、倍率を1xにすると良いです。
th_7

つぶやき

kogoto_prof

サクッとモバイルでの表示画面を確認できるのは便利ですね。
ただし、iPhoneのステータスバーやSafariの上下バーがプレビューでは考慮されていないようです。
ちょっぴり惜しい。

コメントはこちら

*
*
* (公開されません)

Return Top