質問: ### 前提・実現したいこと meet.upを閲覧していた際に、デバイスによりページデザインが異なることが気になりました。 ソースコードを見ても、レスポンシブサイトというわけでは無さそうです。 どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか? ### 使用機器 スマホ(iphone8) パソコン(mac book pro) ブラウザ - サファリ、クローム ### 試したこと IOSの変更 →変化無し 幅の変更 →変化無し スマホページのソースコードをパソコンで開いてみる →パソコンページと同じになる ソースコードの比較 →全て一緒 ソースコードの変更 →変化無し キャッシュの消去 →変化無し ### ページ スマホのページデザイン ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/539edf655d948086be43d45117702996.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ef5e61d699f4f244d9695d290772f3e1.png) パソコンのページデザイン ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/533930f287b555e0576b68776acc19fa.png)
回答: > > ソースコードを見ても、レスポンシブサイトというわけでは無さそうです。 > > > maisumakunさんのおっしゃるとおり、レスポンシブです。 ただし、モバイル〜PC間のレスポンシブコントロールはなく、 モバイルにおいて、デバイスのスクリーンサイズによって、見せ方を変えたり(幅とか変えたり)しているので、レスポンシブと言えます。 (PCにおいてもモバイルにおいてもシームレスに変わるのだけがレスポンシブと言うわけではない。とにかく、デバイス、ブラウザのスクリーンサイズによって、大きさを変動させるのがレスポンシブ) ただし、通常は、このようにPCとモバイルでソースコードの内容を変える場合、 サーバーサイドでHTMLの内容を変えるのが一般的ですが、 ソースコードを表示した限り、確かに変動はないです。 デベロッパーツールで検証すると、 モバイル表示に切り替えた時に、ページ全体に対して、おそらくJavaScriptの処理が走っており、HTMLの内容が全体的に差し替わっています。 つまりクライアントサイドで、ユーザーエージェント判別によりページ内容を差し替える、珍しい実装かと思います。 (もしかしたら今のトレンドかもですが) > > どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか? > > > このサイトは、画面サイズだけでなく、**ユーザーエージェント**によって、表示を切り替えているので、 Google Chromeなり、Fire Foxなりで、F12を押し、デベロッパーツールを使う必要があります。 デベロッパーツールを使えば、モバイル表示が可能です。 細かいやり方は、調べてみましょう。 "ブラウザ デベロッパーツール スマホ表示" とかのキーワードで。