PC画面でスマホ(モバイル)表示になってしまう現象の直し方

ここで記事に書くのも恥ずかしいほどのことだが(笑・・。
一生懸命作ってきた本サイトを見てもらおうと、知人のパソコンにURLを打ち込んで、早く表示されないかとを待っていた。この時すでに、私の顔はちょっとだけ「どや顔」になりつつあったのに(笑、現れたサイトを見てフリーズしてしまったのだ。
そのPC画面には、必死に作ったサイドバーもメニューもなく、右上には、3本線が・・。これはスマホで見るモバイル表示ではないか・・。

スポンサーリンク

PC画面なのにPC(ブラウザ)表示にならない現象に慌てる

もちろん自分のPCでは、作り込んだとおりにサイトが表示されていたので、これを見てかなり驚いた(笑。
使用しているWordPressのテーマは、レスポンシブ対応のはずである。
慌てて、近くにあった別のPCで手当たり次第確認すると、きちんとPC(ブラウザー)表示になるものとスマホ(モバイル)表示になるものがある。

WordPressのダッシュボードで設定を確認したが、「完全レスポンシブ表示を有効」の欄には、もちろんチェックが入っている(後から落ち着いて考えると、このチェック漏れなら、スマホの表示がおかしくなるはずだがw)。

パソコン画面に表示されたスマホ画面?
ネットで検索しても、PC画面にスマホ表示を出す方法ばかりに行き当たり、いよいよ解決策がわからない。
これは、マルチサイトにしたせいか、CSS等をいじっているうちにプログラムを壊してしまったのか・・などと20時間近くも悩み、最後には親テーマの初期ファイルとの照合まで考えてしまった。

・・が、結果としては、私が無知なだけだった(笑。余計なことをしなくて本当によかった。

こんな初歩的なことで悩むのは私だけかも知れないが、初心者の自戒を込め、恥を忍んで記事にしておくことにする。

レスポンシブが基準とするのは画面幅だった

そもそもレスポンシブとは、レスポンシブ・ウェブ・デザイン(responsive web design)の略語らしい。
デジタル大辞泉によれば、「ウェブページデザインの手法の一。スマートホン、タブレット型端末、パソコンなど複数の端末に対し、単一のURL(HTML)で対応するもの。ブラウザの幅で端末を判断し、表示を切り替える。レスポンシブデザイン。RWD。」とのこと。
私は、こうした基準を考えることもなく、レスポンシブなら端末ごとにそれなりに表示されるものと信じていたが、どうやらこれは、「ブラウザの幅」がメルクマールだったのだ。今日まで知らなかったw・・。

正しくPC表示にする単純な方法

ということで前置きが長くなったが、問題の解消方法は、以下のとおりとても単純なことだった。

「PCのブラウザを画面いっぱいに大きくする」
基本的にはこれだけである。幅だけを横に伸ばしてもPC表示になる。逆に狭くするとモバイル表示になってしまう。

しかし、この対応でも表示が直らないブラウザがあった。その場合は、
Ctrlキー+キーを同時に押す」
これで、画面表示が縮小される。デフォルトで100%になっている場合には、1度キーを押すと90%になるが、私が試した限りでは、この段階ですべてのPCできちんとブラウザ表示することができた。

ようやくスッキリして、めでたしめでたしw。