Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

problem with iPad pro #83

Open
the-einstein opened this issue Jul 13, 2021 · 6 comments
Open

problem with iPad pro #83

the-einstein opened this issue Jul 13, 2021 · 6 comments

Comments

@the-einstein
Copy link

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
Copy link

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

@skoulix
Copy link

skoulix commented Feb 8, 2023

@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
Copy link
Author

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
Copy link

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
Copy link

I have the same issue

@Stiropor
Copy link

Stiropor commented Sep 21, 2024

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 })
				}
			}
		}
	},
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants