[javascript/jquery]ウェブサイトをどのipadの機種（〇世代、air/proなど）で見ているか判定する方法はあるのでしょうか？

Question

私のサイトはipad（safari）の様々な機種で閲覧することを想定していますが、タイトルのように、今どの機種のipadでウェブサイトを閲覧しているか判定する必要に迫られています。ipad airなのか、proなのか、それは何世代なのか？
javascriptかjqueryどちらかで調べたいと考えています。

使用機種のOSはすべてipadOS 13～15のいずれかが想定されますが、
userAgentを取得しても決定的な情報は得られないように思います。
何か良い方法は無いでしょうか？

※追記
stackoverflowにも同一の質問を投稿しています（解決済としました）。
早く解決したい気持ちが盛ってしまいました。
https://ja.stackoverflow.com/q/88071/51253

Comments

[hoshi-takanori]

何のために判定したいのでしょうか？

[stnstn]

特定の機種で発生する表示崩れ問題があり、
この機種のみに対してCSSのプロパティ変更を施して問題を解決をしたいためです。

[hoshi-takanori]

それは特定の解像度で起こるとかではなく、機種固有 (同じ解像度でも他の機種なら起こらない) のでしょうか？ 差し支えなければその機種名を教えてください。
(というか、Apple にバグレポートを上げた方が良いのでは…。)

[stnstn]

機種固有と考えています。
ipad air 第４世代のみで発生します（画面サイズは10.9インチの１種類のみのようですね）。

[hoshi-takanori]

ありがとうございます。iPad Air 4 と最新機種の Air 5 が 1640 x 2360 (CSS ピクセルでは 820 x 1180) みたいですね。その解像度でテストしてみてはいかがでしょう。
https://uzurea.net/iphone-ipad-resolutions/
https://torimalu.com/resolution/

[stnstn]

助言いただきありがとうございます。
しかし、今自分が抱える問題は正直もっとハードウェアに依存している気がしていて、
それを無理やり、根本的な解決をせずにCSSで相殺していく作戦でいるので、
仰るように画面サイズを考慮してPC上でテストする方法はあまり有効でないように思います。
せっかく質問してくださったのにごめんなさい。

[1T2R3M4]

https://ja.stackoverflow.com/questions/88071

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

下記記事が参考になるでしょう。
User-Agent Client Hints(UA-CH)を取得する - Qiita

それまで、UserAgentを使用し、OSを確認する、という手段が主だったものでしたが、
Googleがユーザーエージェント（UA）文字列を凍結・非推奨するということが決定しており、
（当初の予定では、2020年には実施予定だったが、コロナの影響により、延期されている）
ほとんど、OS判別などに使用できるものではなくなる可能性が非常に高いものとなっています。
そこで、代替ないし、それ以上の仕様として、
User-Agent Client Hintsとなるものが登場しました。
Client Hintsは、従来のUser-Agent以上に、OSのバージョンや、端末情報文字列まで詳細に取得できるものとなっているので、
質問者さんの質問要件を満たせるものかと思われます。

ただし、現段階対応しているブラウザはごく少数なため、まだ、
実用に足るものとはいえないでしょう。

Comments

[stnstn]

回答いただきありがとうございます。
確かに
navigator.userAgentData;
で機種情報が取れるのなら、私の実現したいことが可能になりますね。
しかし私のiPad pro(第２世代、iOS15.2.1)で試したところ、やはりnavigatorはuserAgentDataを持っておらず、
仰る通り今のところは難しいようです。

Answer 2

https://yourdevice.tanokatu.com/
手元のiPhoneで試してみましたが、所得されてました。

10.9インチ

この4世代でのみ発生するのであれば、そのiPadが使うブラウザのウィンドウサイズを調べておき、そのサイズに対してのみ　メディアクエリでCSSを切り替えるということもできないかなと、最初思いました。　他の第3世代とかのiPadの表示も巻き込んでしまうことになりそうですけどね。

Comments

[stnstn]

回答いただきありがとうございます。

今回はたまたまipad air 第４世代ひとつの機種を判別できれば良かったので、
仰るような画面ディスプレイのサイズを取得して判別する方法で行こうと思います。
ただ、ipad air第５世代も同じサイズ（10.9インチ）のようなので、
今回の私の場合は妥協して考えないことにしてますが、最善の方法ではないようですね…
回答くださった皆様、ありがとうございました。