質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

デザインパターン

デザインパターンは、ソフトウェアのデザインでよく起きる問題に対して、解決策をノウハウとして蓄積し再利用出来るようにした設計パターンを指します。

Q&A

5回答

4568閲覧

同じURLでもページデザインが異なる理由

kkhaa

総合スコア10

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

デザインパターン

デザインパターンは、ソフトウェアのデザインでよく起きる問題に対して、解決策をノウハウとして蓄積し再利用出来るようにした設計パターンを指します。

0グッド

0クリップ

投稿2019/12/12 02:28

編集2022/01/12 10:55

前提・実現したいこと

meet.upを閲覧していた際に、デバイスによりページデザインが異なることが気になりました。
ソースコードを見ても、レスポンシブサイトというわけでは無さそうです。

どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか?

使用機器

スマホ(iphone8)
パソコン(mac book pro)
ブラウザ - サファリ、クローム

試したこと

IOSの変更
→変化無し

幅の変更
→変化無し

スマホページのソースコードをパソコンで開いてみる
→パソコンページと同じになる

ソースコードの比較
→全て一緒

ソースコードの変更
→変化無し

キャッシュの消去
→変化無し

ページ

スマホのページデザイン
イメージ説明
イメージ説明

パソコンのページデザイン
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2KOH

2019/12/12 03:08

「デザインパターンの質問とは珍しいな」と思って開いたら…。 「デザインパターン」は専門用語です。決して「Webサイトのデザインのパターン」という意味ではありません。 この質問だと普通に「HTML」や「CSS」等のタグが適当です。
Y.H.

2019/12/12 05:35

タイトルと質問本文で質問内容が異なりますが、どちらが質問でしょうか? ・同じURLでもページデザインが異なる理由 ・どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか?
guest

回答5

0

こんにちは。

どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか?

PCでサイトをスマホ画面表示する方法」に載ってますが、ちょっと記事が古いようです。
Chromeでは、F12で表示されるペインの左上にある、「四角2つ」のアイコン(手前がスマホで奥がPCを表している?)を押すと切り替えできるようです。押してリロードすると完全に変わります。

F12のソース解析部分を開いて見てみると、スマホとPCで変化する部分があるようです。

投稿2019/12/12 03:03

編集2019/12/12 03:06
Chironian

総合スコア23272

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ソースコードを見ても、レスポンシブサイトというわけでは無さそうです。

いえ、レスポンシブサイトのようです。単にモバイルとPCでランディングページが異なるだけではないかと思います。

投稿2019/12/12 02:38

maisumakun

総合スコア145064

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ソースコードを見ても、レスポンシブサイトというわけでは無さそうです。

maisumakunさんのおっしゃるとおり、レスポンシブです。
ただし、モバイル〜PC間のレスポンシブコントロールはなく、
モバイルにおいて、デバイスのスクリーンサイズによって、見せ方を変えたり(幅とか変えたり)しているので、レスポンシブと言えます。
(PCにおいてもモバイルにおいてもシームレスに変わるのだけがレスポンシブと言うわけではない。とにかく、デバイス、ブラウザのスクリーンサイズによって、大きさを変動させるのがレスポンシブ)
ただし、通常は、このようにPCとモバイルでソースコードの内容を変える場合、
サーバーサイドでHTMLの内容を変えるのが一般的ですが、
ソースコードを表示した限り、確かに変動はないです。
デベロッパーツールで検証すると、
モバイル表示に切り替えた時に、ページ全体に対して、おそらくJavaScriptの処理が走っており、HTMLの内容が全体的に差し替わっています。
つまりクライアントサイドで、ユーザーエージェント判別によりページ内容を差し替える、珍しい実装かと思います。
(もしかしたら今のトレンドかもですが)

どのようにしたら、スマホのデザインページをパソコンで閲覧できるでしょうか?

このサイトは、画面サイズだけでなく、ユーザーエージェントによって、表示を切り替えているので、
Google Chromeなり、Fire Foxなりで、F12を押し、デベロッパーツールを使う必要があります。
デベロッパーツールを使えば、モバイル表示が可能です。
細かいやり方は、調べてみましょう。
"ブラウザ デベロッパーツール スマホ表示"
とかのキーワードで。

投稿2019/12/12 08:47

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/12/12 09:16

なるほど、JSによる書き換えをしてるのですね、初めてこのような実装を見ました。
miyabi_takatsuk

2019/12/13 03:39

サイトに使われてるツールを探れるアドオン使って見てみると、どうやら、 サーバーサイドはJava、 JSフレームワークを2つほど使っているようですね。 それでこの表示速度はなかなか驚異的です。 非常に技術力高いですね。
guest

0

ブラウザから送信されるユーザーエージェントから判別して、表示する内容を切り替えているのではないでしょうか。

投稿2019/12/12 05:21

XNXSXMXR

総合スコア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

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/12/12 08:49 編集

ソースを表示で表示時は、上記が表示されているため、 (検証時は、回答とおり、PCとモバイルで違う。デベロッパーツール開きっぱで更新すると、HTML全体にJS処理が走っている様子がある) おそらく、サーバーサイドではなく、クライアントサイドで内容を切り替えてそうです。 同じページで、リライトもしてないけど、PCとモバイルでソース分けしてるという奇妙な実装ですねこれ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問