problem with iPad pro

[the-einstein]

When making my web page adaptive for iPad, I used isTablet optioin. And I want it to work properly showing that the device I am using is a tablet - iPad. But the plugin sees it as a desktop.

What option to use to get an iPad device?

[fandrianarisataGithub]

@the-einstein did you fix it? please can you share it here? thx

[skoulix]

@the-einstein did you fix it? please can you share it here? thx

I have the same issue but I noticed that the iPad Pro registers as a desktop device and the OS as MacOS and not iOS. In other words the iPad Pro is a desktop wannabe LOL

You might be able to solve this by creating a custom flag.

[the-einstein]

Sorry for not updating my issue. Have not worked on the project for a while. But in that moment I tried many ways to fix this issue, but ended up using not very proper way by finding the screen size from browser itself (using window.screen.width;) and developing the page from that size.

[hecktarzuli]

I don't use this module (yet), we have our own solution in place already. In general, iPad Pros are a pain. They use the same user agent as non-pros. One has the resolution/dimensions of a tablet, the other a desktop so no matter what your solution you'll always have server-side detection thinking it's a tablet and client-side detection thinking it's a desktop (if it's based on resolution).. This is what we do. Yes, Ipad Pros will re-draw their experience the first time they hit the site, but from then on it's seamless.

The only way this will get solved is either
a) Apple starts sending different user agents for Pros (unlikely) or
b) Safari starts supporting client-hints.

[PingZi818]

I have the same issue

[Stiropor]

In case anyone stumbles upon this and needs this solution ... this is what we did for our case. Basically it detects on frontend if it's Apple's device and supports touch (so until now there is no macbook/imac with touch). Sets the cookie and reloads nuxt. Only first time these users with pro or ipad 10 will have page reloaded and their device will be known as tablet.

Might be a dumb solution but it works 😄

export default defineNuxtPlugin({
	name: 'device-fix',
	enforce: 'post',
	setup() {
		const device = useDevice()
		const ipadTabletFix = useCookie('ipadTabletFix', {
			maxAge: 60 * 60 * 24 * 365,
		})

		if (import.meta.server) {
			if (ipadTabletFix?.value === true) {
				device.isTablet = true
				device.isMobileOrTablet = true
				device.isDesktop = false
			}
		}

		if (import.meta.client) {
			if (!device.isTablet && !device.isMobile && device.isApple && window.ontouchstart !== undefined) {
				device.isTablet = true
				device.isMobileOrTablet = true
				device.isDesktop = false

				if (!ipadTabletFix.value) {
					// Set cookie to fix iPad tablet detection and reload Nuxt app
					ipadTabletFix.value = true
					reloadNuxtApp({ force: true })
				}
			}
		}
	},
})