りんごが好きなのでぃす

Macを中心に、たま〜にiPhoneやiPadなどの話題も届けていたら今年で26年目を迎えてました

【Macの豆】第102回:Safariでレスポンシブ・デザイン・モードに切り替えてもスマホ版表示に変わらない場合の対処法

 

f:id:kjx130:20161011143833p:plain

macOSのSafariで "開発" メニューを有効にすると "レスポンシブ・デザイン・モード" という機能が使えるようになります。

これを使うと普通はパソコンでは表示されないスマホ版などの画面を表示させることができるので、例えばウェブページのデザインの検証などに使うことができます。

f:id:kjx130:20200704110017j:plain

macOSのSafariでYahoo!トップをiPhone 8 Plus(横)で表示させた例

しかし、時々ですがレスポンシブ・デザイン・モードに切り替わっているのに表示内容がスマホ表示ではなくPC向けの画面が表示されてしまう場合があります。

(´-`).。oO(webページの作りによってはレスポンシブ・デザイン・モードが機能しない場合もあります)

こんな時は以下で解決することが多いので症状が出た時に試してみてください。

どういう現象?

本来ならレスポンシブ・デザイン・モードに切り替えるとこうなるはずなのに、

f:id:kjx130:20200704110825j:plain

任意のウェブページでレスポンシブ・デザイン・モードに切り替える

タイミングが悪いのか機嫌が悪いのか分からないけど時々、

f:id:kjx130:20200704111046j:plain

スマホ版表示(前の画像)になるはずなのにPC向けの表示

このようにPC版の画面が押し込められただけの表示になってしまうことがある。

復旧手順

多くのウェブサイトはページの一番上にあるサイトロゴなどをクリックするとトップページに移動し、その際にユーザエージェント等を確認して表示すべきレイアウトを自動選択しているので……

  1. 任意のページでレスポンシブ・デザイン・モードに切り替える
  2. PC表示のままだったらサイトロゴをクリックしてみる
  3. 相変わらずPC表示のままならレスポンシブ・デザイン・モードを一旦解除
  4. もう一度レスポンシブ・デザイン・モードに切り替え直す

ほぼほぼこれでスマホ表示に戻るので、あとは表示されているページ内をクリックするなどして見ようとしていたページに戻ればOKです。

当たり前ですがウェブページでがPC用/スマホ用の両対応(レスポンシブ)になっていなかったらそもそもモードを切り替えてもスマホ用の表示にはならないので上記手順は無意味です。

あくまでも『いつもは変わるのに、たまたま変わらなかった』という時のための対処法なので勘違いしないでくださいね。

レスポンシブ・デザイン・モードを使うには?

Safariで "開発" メニューを有効化させる必要があります。

f:id:kjx130:20200704112028j:plain

Safariの環境設定>詳細タブ内の一番下に項目があります

これを有効にすると、Safariのメニューバー項目 "ブックマーク" と "ウインドウ" の間に "開発" メニューが追加されます。

f:id:kjx130:20200704112411j:plain

普通にブラウジングするだけなら無効のままで問題なし

ちなみにポイントサイトなどPC版とスマホ版で取り扱いが違っているサイトなど、いちいちPC<>スマホと持ち帰るのが面倒な時なんかにも重宝しますよ。