はじめに

iPadOSのベータ版の頃からじわじわ話題に上がってましたが、iPadOSではUA（ユーザーエージェント）がMacOSと同じになりました。

この記事とか

変わることはわかっていたのですが、遊びで作ってたサイトでこのUA変更に見事につまずきました。

Webサイトのホバー対応でつまずいた

遊びで作ってたサイトのボタンのホバー時のアニメーションをPCとスマホ・タブレットでUA判定して切り替えていたのですが、iPadOSで見事にバグりました...

下記がそのコードです。（前せっかくCodePenの使い方について書いたのでCodePenで）

See the Pen iPadOS-UA by am10 (@am102) on CodePen.

今のところ対応はしていません...

思いついた対応方法です。

UA判定はやめてスクリーンサイズで切り替える
この方法だとPCでウィンドウサイズを縮小された時タブレットと判定されるから嫌だなと思いUA判定にしたのですがあきらめるのも１つの手だと思います。
UAの判定方法を変える
下記の記事では画面の解像度でUAを判定しiPadを判別しているようです。
ユーザエージェントでの iPad 判定関数 iOS/iPadOS 対応版
hoverのアクションをあきめる
もうレスポンシブ対応する場合は潔くhoverのアクションをあきらめるのも手だと思います。
メディアクエリのhoverを使う
メディアクエリhoverこういうのもあるみたいなので利用するのもありかと思います。（IEは対応していません...）

AppleのMac Proの紹介ページをiPadやiPhoneで見るとARでMac Proを表示する機能があります。この機能がiPadOSのベータ版が出た時はUAで判定を行っていたらしく、iPadでアクセスするとAR機能が表示されないということがあったようです。

（当時手元にiPadOSの端末がなかったので私自身で確認できていません。話半分で流してください。調べると6月頃にTwitterの一部で話題になっていました。）

iPadなどでGmailにログインした際は下記のようにセキリティ通知が届きます。

ここに「Mac デバイス」など何の端末でログインしたか表示されますが、iPad（第5世代 13.1.3）でログインすると「Apple iPad デバイス」と表示され、iPad Pro(12.9インチ第3世代 13.2）でログインすると「Mac デバイス」と表示されました。

これはスクリーンサイズとかで判定してるんですかね？もう端末の判定はあきらめた方がいいような気もします...

iPadのUAの変更の影響は、本業（モバイルアプリ開発）の方では特にありませんでした。モバイルアプリでは独自UAを設定していることが多く、WebViewでの表示に影響があってもWebサイトの改修になるので、これといって対応することがありませんでした。

iPadでネットサーフィンをしているとレイアウトが崩れているサイトをちらほら見かけるのでWeb側は多少なり影響を受けたようですね