Q&A
「デザインパターンの質問とは珍しいな」と思って開いたら…。
「デザインパターン」は専門用語です。決して「Webサイトのデザインのパターン」という意味ではありません。
この質問だと普通に「HTML」や「CSS」等のタグが適当です。
前提・実現したいこと
meet.upを閲覧していた際に、デバイスによりページデザインが異なることが気になりました。
ソースコードを見ても、レスポンシブサイトというわけでは無さそうです。
どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか？
使用機器
スマホ(iphone8)
パソコン(mac book pro)
ブラウザ - サファリ、クローム
試したこと
IOSの変更
→変化無し
幅の変更
→変化無し
スマホページのソースコードをパソコンで開いてみる
→パソコンページと同じになる
ソースコードの比較
→全て一緒
ソースコードの変更
→変化無し
キャッシュの消去
→変化無し
ページ
スマホのページデザイン
パソコンのページデザイン
タイトルと質問本文で質問内容が異なりますが、どちらが質問でしょうか？
・同じURLでもページデザインが異なる理由
・どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか？
回答5件
0
こんにちは。
どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか？
「PCでサイトをスマホ画面表示する方法」に載ってますが、ちょっと記事が古いようです。
Chromeでは、F12で表示されるペインの左上にある、「四角２つ」のアイコン（手前がスマホで奥がPCを表している？）を押すと切り替えできるようです。押してリロードすると完全に変わります。
F12のソース解析部分を開いて見てみると、スマホとPCで変化する部分があるようです。
投稿2019/12/12 03:03
編集2019/12/12 03:06
総合スコア23272
0
ソースコードを見ても、レスポンシブサイトというわけでは無さそうです。
いえ、レスポンシブサイトのようです。単にモバイルとPCでランディングページが異なるだけではないかと思います。
投稿2019/12/12 02:38
総合スコア145967
0
ソースコードを見ても、レスポンシブサイトというわけでは無さそうです。
maisumakunさんのおっしゃるとおり、レスポンシブです。
ただし、モバイル〜PC間のレスポンシブコントロールはなく、
モバイルにおいて、デバイスのスクリーンサイズによって、見せ方を変えたり（幅とか変えたり）しているので、レスポンシブと言えます。
（PCにおいてもモバイルにおいてもシームレスに変わるのだけがレスポンシブと言うわけではない。とにかく、デバイス、ブラウザのスクリーンサイズによって、大きさを変動させるのがレスポンシブ）
ただし、通常は、このようにPCとモバイルでソースコードの内容を変える場合、
サーバーサイドでHTMLの内容を変えるのが一般的ですが、
ソースコードを表示した限り、確かに変動はないです。
デベロッパーツールで検証すると、
モバイル表示に切り替えた時に、ページ全体に対して、おそらくJavaScriptの処理が走っており、HTMLの内容が全体的に差し替わっています。
つまりクライアントサイドで、ユーザーエージェント判別によりページ内容を差し替える、珍しい実装かと思います。
（もしかしたら今のトレンドかもですが）
どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか？
このサイトは、画面サイズだけでなく、ユーザーエージェントによって、表示を切り替えているので、
Google Chromeなり、Fire Foxなりで、F12を押し、デベロッパーツールを使う必要があります。
デベロッパーツールを使えば、モバイル表示が可能です。
細かいやり方は、調べてみましょう。
"ブラウザ デベロッパーツール スマホ表示"
とかのキーワードで。
投稿2019/12/12 08:47
総合スコア9555
なるほど、JSによる書き換えをしてるのですね、初めてこのような実装を見ました。
サイトに使われてるツールを探れるアドオン使って見てみると、どうやら、
サーバーサイドはJava、
JSフレームワークを2つほど使っているようですね。
それでこの表示速度はなかなか驚異的です。
非常に技術力高いですね。
0
ブラウザから送信されるユーザーエージェントから判別して、表示する内容を切り替えているのではないでしょうか。
投稿2019/12/12 05:21
総合スコア239
0
少なくとも当方環境では別のコードが表示されました。
HTML
1<!--PCのhtmlタグ--> 2<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="ja"> 3 4<!--スマホのhtmlタグ--> 5<html class=" hasJS">
なので、別のページが表示されているのでは？
投稿2019/12/12 02:45
総合スコア10429
ソースを表示で表示時は、上記が表示されているため、
（検証時は、回答とおり、PCとモバイルで違う。デベロッパーツール開きっぱで更新すると、HTML全体にJS処理が走っている様子がある）
おそらく、サーバーサイドではなく、クライアントサイドで内容を切り替えてそうです。
同じページで、リライトもしてないけど、PCとモバイルでソース分けしてるという奇妙な実装ですねこれ。
あなたの回答
tips
プレビュー
