PC版とスマホ版サイトをUA以外で切り替える方法

「Google Chrome」でユーザーエージェント（UA）が凍結・非推奨になるという記事を見ました。
https://forest.watch.impress.co.jp/docs/serial/y …

現在、PHPで作られたPC版サイトとスマホ版サイトが別々にあるので、UAに「iPhone」という文字が含まれていたらスマホ版へ飛ばすみたいな運用をしています。

今後UAが凍結・非推奨になったら、どのように切り分けをしたらいいのでしょうか？

No.2 ベストアンサー 回答者： izayoimizuki 回答日時： 2020/01/23 19:55

私はCSSの画面サイズのメディアクエリで対応しています。

全てのブラウザに対してHTML、CSS、Java Script全て全く同じものを使用しています。
その条件でもIE4.0～11、Netscape 4.0～9、Opera 6～12、Firefox、Safari、Google Chrome、Microsoft Edgeで崩壊しない程度に表示されるように作りこんでいます。
（最近はめっきり見かけなくなったブラウザも入っていますが…）

この仕組みを実現するために私はアウターフレームとインナードキュメントという分け方をしています。

アウターフレームは、ヘッダー、メニュー、フッターの部分です。ブラウザや画面サイズ等で表示が変化するのは主にこの部分ですね。
最も高さがある状態ではヘッダー、フッターがスクロール固定で額縁の様に存在し、小さくなるにつれてフッターがスクロールについてゆくようになり最終的にヘッダーもついてゆくようになってハンバーガーメニューとトップに戻るボタンだけが残るようになっています。
一方幅の方は広い場合は、メニューはスクロール固定で表示し、狭い場合は、ハンバーガーメニューで表示するようにしています。
これらの変化は全てCSSが担っています。

一方インナードキュメントはそのページの中身でここはどのブラウザで見ても殆ど見た目が変わらないようにして、Java Scriptで無遷移読み込みを行っています。
（流石に古いブラウザで見ると適用されないスタイルもありますけれど。）

この方法を使う利点として全てのクライアントに同じ情報を届けられる事です。
PC版、スマフォ版、古いブラウザ版と言ったように分けるとどこか編集し忘れたとかそう言ったトラブルが起こりがちです。
また、アウターフレームの段階でどういう状態になったかしっかり要件定義して置けば、メニュー項目を増やしたり減らしたり色々な事をしてもそうそう簡単には表示崩れしない事も利点と言えるかもしれません。

この回答へのお礼

お礼が遅くなってしまい申し訳ありませんでした。
参考にさせていただきます。

お礼日時：2020/03/01 22:15

No.1 回答者： fujillin 回答日時： 2020/01/21 13:29

こんにちは

「iPhone」だけを切り分けるというわけにはいきませんが・・・
レスポンシブ対応の際に利用している、画面サイズで判定するのではいかがでしょうか？
https://creive.me/archives/16922/

この回答へのお礼

お礼が遅くなってしまい申し訳ありませんでした。
参考にさせていただきます。

お礼日時：2020/03/01 22:15