iPad Air and iPad Pro Not Detected as Tablet Devices

[ionut-sg]

Description

The nuxt-viewport module currently does not detect iPad Air and iPad Pro as tablet devices. This issue seems to stem from the reliance on the user agent for determining the device type. Since recent iPad models, such as the iPad Air and iPad Pro, often share user agents with desktops (e.g., Safari on macOS), the detection fails, categorizing them incorrectly.

Steps to Reproduce

1. Install and configure the nuxt-viewport module in a Nuxt project.
2. Access the application using an iPad Air or iPad Pro.
3. Observe that the viewport does not classify the device as a tablet.

Expected Behavior

iPad Air and iPad Pro should be recognized as tablets.

Actual Behavior

iPad Air and iPad Pro are not recognized as tablets, likely due to their user agents being identified as desktop devices.

Possible Solutions

1. Possibility to add custom own parser in detectBreakpoint in order to add extra check for iPad devices function detectBreakpoint(options: ViewportOptions, input: Partial<DetectBreakpointInput>, customUserAgentParser?: any)

2. Update the User Agent parsing Logic: Update the module's user agent detection logic to better handle iPads by including additional checks for Apple devices.

[mvrlin]

@ionut-sg Hi! I don't think it's actually possible using only http request. Can tell you tell which one is iPad?

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

[MickL]

I dont fully understand, isnt this module supposed to work only by screen size, the same way as css media queries work? Therefor you just need to set the right breakpoints?

[mvrlin]

@MickL it is. It will work as expected if the user already loaded the website and right cookie is set. @ionut-sg is asking to detect the initial request (by User-Agent) and unfortunately this is not possible 😄

[MickL]

Yes sorry, I commented in some other issues already that now I understand how it works: First on SSR it needs to guess by looking at the request header user agent.

So this issue only applies to first SSR but then on client side it will set correctly immediately and then also a cookie is saved to all further server side renderings will have the correct viewport.

[mvrlin]

I think the issue can be closed now