ふだんPCで見ているWEBサイトをiPhoneで見たらデザインが変わっていたという経験、ありますよね。その反対に、iPhoneで見慣れたWEBサイトをPCのブラウザで見たらまるで別のサイトのようだった、という経験もあるのではないでしょうか。
このスマートフォン/iPhoneとPCでWEBサイトのデザインが変わってみえる現象は、そのWEBサイトが「レスポンシブWEBデザイン」を採用しているためです。レスポンシブWEBデザインとは、利用される機器/ブラウザの特性に応じてWEBサイトを閲覧してもらうという概念で、スマートフォンはスマートフォンの、PCはPCの画面サイズや表示性能に適したページデザインを適用します。
レスポンシブWEBデザインを実現するには、WEBサイト(WEBサーバ)側に閲覧する機器を判定する機能が必要になります。接続してきたブラウザがスマートフォンなのかPCなのか、画面解像度はどのくらいあるのかを最初に判定し、その結果によってスマートフォン向けデザインとPC向けデザインのどちらを適用するか決定します。
一般的に、レスポンシブWEBデザインを採用するサイトでは、て機器ごとにCSS(WEBページのデザインを決めるプログラム)を切り替える方法で対応します。実際にはJavaScriptやPHPといったスクリプト言語の力を借りて処理されますが、複数の解像度向けのCSSを用意し切り替えることで、スマートフォンとPC、タブレットそれぞれに最適化したページデザインを実現しているのです。
このしくみを応用した機能が、iOS 13のSafariに用意されています。デザインを変更したいWEBサイトを開いた状態で画面左上のアルファベットをタップし、「Webサイトの設定」を選択すると現れる画面で「デスクトップ用Webサイトを表示」スイッチをONにしてみましょう。スマートフォン向けデザインが適用されるはずのWEBサイトでも、以降はPC向けデザインが適用されるようになりますよ。
-
iPhoneで見るWEBサイトがPCで見るときとデザインが違う理由は
