IOS device detection

[cryptoHersh]

Modern iPad Ios safari has by default desktop set up, hence it is impossible to detect iPad device type in server components using UserAgent. Has any one found any solution to this?

At present you can detect device on client component using window object however in case if you need this info on layout.tsx or any parent SSR it is almost impossible to detect iPad as a mobile or tablet device. Below is sample user agent from iPad.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15

[icyJoseph]

What do you want to do with this info? Just for completeness sake, it is possible to do stuff with CSS client sdie.

The go-to library, faisalman/ua-parser-js#671, seems to have given up? If the User Agent is not enough, then we are kind of short of options in a server side environment.

[cryptoHersh]

The root layout is designed different for desktop, mobile and tablet, only the iOS tablet safari has default desktop. The problem is even thought the client component can use window object to detect screen size it is the server component html that needs it. Eventhough the tailwind css lib has provisions to use class names to do the job it's not sufficient. the ua-parser library doesn't work as the user agent doesn't have the necessary info differentiate iPads.

[icyJoseph]

ua-parser library doesn't work as the user agent doesn't have the necessary info differentiate iPads

That's the root issue, on the server side, there's very little info to work with. I used ua-parser as an example, since it is the by far the most used library to detect devices and such from user agent strings.

It does sound like a CSS solution is what you could use though, but I understand that some designs vary wildly across devices and often it is hard to just do it with CSS.