モバイルデバイスは、多くのWebサイトのオンラインリーダーの大部分ではありませんが、すでに大部分を占めているため、iPhoneまたはタブレットでサイトが適切に表示および機能することを確認することが重要です。 特定のURLのモバイルレイアウトプレビューを提供するサービスは数多くありますが、AppleはOS X El CapitanのSafari 9を使用して、モバイル対応のWebサイトのテストをはるかに簡単にしました。 レスポンシブデザインモードと呼ばれる新機能を使用すると、さまざまなAppleデバイスや一般的なモバイル画面解像度でWebサイトの外観をすばやくプレビューできます。 仕組みは次のとおりです。
レスポンシブデザインモードはOS X El CapitanのSafari 9専用の新しい機能であるため、それにアクセスするには少なくともこれらのバージョンのブラウザーとオペレーティングシステムを実行する必要があることを繰り返しておくことが重要です。 お使いのMacがこの要件を満たしている場合、最初にSafariの開発者モードを有効にする必要があります。 これを行うには、Safariを起動し、メニューバーの[ Safari ]をクリックします。 次に、[ 設定]> [詳細]を選択します。
Safariの[環境設定]ウィンドウの[詳細設定]タブで、[メニューバーに開発メニューを表示] チェックボックスをオンにします。オプションの名前が示すように、Safariメニューバーの右側に新しい[開発]メニューが表示されます「しおり。」
次に、Safariの設定ウィンドウを閉じて、レスポンシブデザインモードでテストするWebサイトに移動します。 Webサイトがブラウザーに完全に読み込まれたら、キーボードショートカットのCommand-Option-Rを使用すると、ブラウザーウィンドウがいくつかのモバイルデバイスの解像度のいずれかのプレビューに変換されます（[ 開発 ]をクリックして、レスポンシブデザインモードにアクセスすることもできます） Safariメニューバーを開き、[ レスポンシブデザインモードに入る ]を選択します ）。
Safariレスポンシブデザインモードでは、3.5インチのiPhone 4Sから12.9インチのiPad Proまで、Appleのすべてのモバイルデバイスの解像度でWebサイトがどのように見えるかをプレビューできます。 ユーザーは、1x、2x、または3xの「Retina」解像度を選択し、ブラウザエージェントを変更して、Chrome、Firefox、Edgeなどの最も一般的なブラウザの動作を模倣するオプションもあります。
ユーザーは、デバイスと画面サイズごとに、デバイスアイコンをクリックして縦向きと横向きを切り替えることができます。また、分割ビューをサポートするiPad AirやiPad Proなどのデバイスでは、クリックしてさまざまな分割ビューレイアウト間を回転できます。
Safari Responsive Design Modeには、同様の既存のツールのオプションがいくつかありませんが、Safariに直接組み込むことは、Webデザイナーにとって大きな時間の節約になり、モバイル訪問者を確認したいWebサイト所有者にとっては、優れた学習およびテストツールです画面の解像度やサイズに関係なく最高のエクスペリエンスを得ています。
テストが完了したら、ブラウザーウィンドウまたはタブを閉じるか、ショートカットのCommand-Option-Rをもう一度押すことで、レスポンシブデザインモードを終了できます。
