Macユーザー必見です!Safari9の新機能がすごい

この記事の所要時間: 156

こんにちは。

私はMacを使って簡単なweb作成やコーディングをするのですが、なかなかめんどくさいのが「スマホではどうやって表示されるのよ」というとこ。

正直いろんなPCからのスマホブラウジングができるサービスはたくさんありますが、現状慣れている方法はやっぱりスマホを片手に更新するという方法。

正直めんどくさいなーと思いながらもこの作業をやっていました。

しかし、この度のアップデートでsafariにこの機能が追加されました!

やっほ〜!

safariから各iosデバイスの表示確認が簡単にできます!

ということでsafariの新機能をご紹介いたします。

実装画面はこれ

safari9新機能

こんな感じでiPhone4s〜iPad Air2までの表示確認が一発で簡単に行えます。

それに加えて解像度の違う三つの表示タイプがワンクリックで確認できます。

Macでレスポンシブサイトを作っている方にはとても便利な機能だと思います。

それでは設定方法をご紹介しましょう。

新機能の使い方!

まずは簡単な設定です。

スクリーンショット 2015-10-08 16.20.09

まずはsafariを開きます。メニューバーに「開発」を表示させます。

初めから表示されていればここは必要ありません。私は表示されていないので表示をさせます。

まずはメニューバーから「safari」をクリックします。

safari9-3

そして 「safari」→「環境設定」→「詳細」とクリックします。

詳細タブの一番下。「メニューバーに”開発”メニューを表示」にチェックします。

スクリーンショット 2015-10-08 16.29.16

以上で設定は終了です。これでメニューバーに開発が表示されます。

表示された画面はこんな感じです。

safari9-6

それでは使ってみましょう!

設定は完了したので使い方と実際の操作です!

まずはsafariを起動し、メニューバーより「開発」をクリックします。

そして「レスポンシブ・デザイン・モードにする」をクリックします。

safari9-7

そうすると画面が切り替わります。

safari9新機能

そうするとブラウザがこのような画面に切り替わります。

後は任意のデバイスを画面上部からクリックすると画面が切り替わっていきます。

まとめ

どうですかーこれ使う人からするととても便利ですよねー

是非使ってみてくださいねー

  • このエントリーをはてなブックマークに追加