ハイエンドの開発者から自宅で簡単なブログサイトを作る人まで、ウェブサイトを構築する人は誰でも、その見た目をテストする必要があります。様々なデバイスでウェブサイトがどのように表示されるかを確認することは非常に重要です。幸いなことに、Safariにはレスポンシブデザインモードという、非常に簡単なショートカットがあります。
レスポンシブデザインモードに入る
まず最初に、「開発」メニューをオンにします（まだオンにしていない場合）。Safari > 環境設定 > 詳細を開き、「メニューバーに開発メニューを表示」にチェックを入れます。その後、 Ctrl + Cmd + Rキーを押します。 これでレスポンシブデザインモードが起動します。ページ上部でデバイスを選択すると、ウェブサイトが様々なデバイスでどのように表示されるかを確認できます。
モバイル デバイスで Web サイトを表示していて、縦向きと横向きの両方で Web サイトがどのように見えるかを確認したい場合は、デバイスをクリックして回転させます。
ドロップダウン メニューを使用して、さまざまなブラウザで Web サイトを表示することもできます。
レスポンシブ デザイン モードを終了するには、もう一度 CTL + CMD + R を押します。
