macOSのSafariで "開発" メニューを有効にすると "レスポンシブ・デザイン・モード" という機能が使えるようになります。
これを使うと普通はパソコンでは表示されないスマホ版などの画面を表示させることができるので、例えばウェブページのデザインの検証などに使うことができます。
しかし、時々ですがレスポンシブ・デザイン・モードに切り替わっているのに表示内容がスマホ表示ではなくPC向けの画面が表示されてしまう場合があります。
(´-`).｡oO(webページの作りによってはレスポンシブ・デザイン・モードが機能しない場合もあります)
こんな時は以下で解決することが多いので症状が出た時に試してみてください。
どういう現象？
本来ならレスポンシブ・デザイン・モードに切り替えるとこうなるはずなのに、
タイミングが悪いのか機嫌が悪いのか分からないけど時々、
このようにPC版の画面が押し込められただけの表示になってしまうことがある。
復旧手順
多くのウェブサイトはページの一番上にあるサイトロゴなどをクリックするとトップページに移動し、その際にユーザエージェント等を確認して表示すべきレイアウトを自動選択しているので……
- 任意のページでレスポンシブ・デザイン・モードに切り替える
- PC表示のままだったらサイトロゴをクリックしてみる
- 相変わらずPC表示のままならレスポンシブ・デザイン・モードを一旦解除
- もう一度レスポンシブ・デザイン・モードに切り替え直す
ほぼほぼこれでスマホ表示に戻るので、あとは表示されているページ内をクリックするなどして見ようとしていたページに戻ればOKです。
当たり前ですがウェブページでがPC用/スマホ用の両対応（レスポンシブ）になっていなかったらそもそもモードを切り替えてもスマホ用の表示にはならないので上記手順は無意味です。
あくまでも『いつもは変わるのに、たまたま変わらなかった』という時のための対処法なので勘違いしないでくださいね。
レスポンシブ・デザイン・モードを使うには？
Safariで "開発" メニューを有効化させる必要があります。
これを有効にすると、Safariのメニューバー項目 "ブックマーク" と "ウインドウ" の間に "開発" メニューが追加されます。
ちなみにポイントサイトなどPC版とスマホ版で取り扱いが違っているサイトなど、いちいちPC＜＞スマホと持ち帰るのが面倒な時なんかにも重宝しますよ。
