iPhoneやiPad、Macでどう見えるかをシミュレートできる
基本的にこの「レスポンシブ・デザイン・モード」は一般の人向けではなく、デベロッパ向けとなりますが、ウェブサイトを運営・管理している人は、様々なデバイスでどう見えるかをチェックできるので便利です。
早速やり方を見ていきたいと思います。まずは、Safariのメニューバーから環境設定を選びます。
![responsibe-02.jpg Responsibe 02](http://link-man.net/wp-content/uploads/2015/10/responsibe-02.jpg)
上のメニューの「詳細」から、一番下にある「メニューバーに"開発"メニューを表示」にチェックボックを入れます。
![responsibe-03.jpg Responsibe 03](http://link-man.net/wp-content/uploads/2015/10/responsibe-03.jpg)
するとメニューバーに「開発」が出てくるので、そこのメニューに「レスポンシブ・デザイン・モードにする」を選びます。
![responsibe-04.jpg Responsibe 04](http://link-man.net/wp-content/uploads/2015/10/responsibe-04.jpg)
このモードでは、「iPhone 4s」〜「iPhone 6 Plus」までのサイズ、「iPad mini 3」「iPad Air 2」のサイズ、Mac向けの解像度「800x600 - 1366x768 - 1920x1080」を選べます。
![responsibe-05.jpg Responsibe 05](http://link-man.net/wp-content/uploads/2015/10/responsibe-05.jpg)
IEやChrome、Fire Foxをシミュレートできたり、Retinaディスプレイのモードも選べるようになっています。
![responsibe-06.jpg Responsibe 06](http://link-man.net/wp-content/uploads/2015/10/responsibe-06.jpg)
細かい部分としては、iPhoneのランドスケープモードや、iPadのSprit viewにも対応していたりするところは便利だと思います。