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

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

ただいまの
回答率

87.37%

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

受付中

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,639

score 6

前提・実現したいこと

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

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

使用機器

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

試したこと

IOSの変更
→変化無し

幅の変更
→変化無し

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

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

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

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

ページ

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 2KOH

    2019/12/12 12:08

    「デザインパターンの質問とは珍しいな」と思って開いたら…。

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

    キャンセル

  • Y.H.

    2019/12/12 14:35

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

    キャンセル

回答 5

+3

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • この投稿は削除されました

+3

こんにちは。

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

少なくとも当方環境では別のコードが表示されました。

<!--PCのhtmlタグ-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="ja">

<!--スマホのhtmlタグ-->
<html class=" hasJS">

なので、別のページが表示されているのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/12 17:29 編集

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/12 18:16

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

    キャンセル

  • 2019/12/13 12:39

    サイトに使われてるツールを探れるアドオン使って見てみると、どうやら、
    サーバーサイドはJava、
    JSフレームワークを2つほど使っているようですね。

    それでこの表示速度はなかなか驚異的です。
    非常に技術力高いですね。

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

閲覧数の多いURLの質問