matt/monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor mobile detection to use built-in Nuxt device module
Some checks failed
Build And Push Image / docker (push) Failing after 2m27s
Details

Browse Source 
Replace custom useMobileDetection composable with Nuxt's useDevice(),
removing reactive mobile detection in favor of static detection to
prevent reload loops and simplify viewport handling
This commit is contained in:
Matt
2025-08-10 14:38:02 +02:00
parent fd08c38ade
commit 2eaf9cda95
10 changed files with 532 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
plugins/03.mobile-safari-fixes.client.ts
View File

@@ -1,31 +1,33 @@
/**
* Mobile Safari Fixes Plugin
* Applies mobile Safari specific optimizations on client side
* Now uses unified mobile detection to prevent conflicts
* Uses static mobile detection to prevent reactive loops
*/
import { useMobileDetection } from '~/composables/useMobileDetection';
// Track if fixes have been applied to prevent duplicate execution
let fixesApplied = false;
export default defineNuxtPlugin(() => {
// Apply mobile Safari fixes on client-side mount
if (typeof window !== 'undefined' && !fixesApplied) {
// Use the unified mobile detection composable
const mobileDetection = useMobileDetection();
// Static mobile detection - no reactive dependencies
const userAgent = navigator.userAgent;
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream;
const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
const isMobileSafari = isIOS && isSafari;
// Apply initial fixes only for mobile Safari
if (mobileDetection.isMobileSafari) {
if (isMobileSafari) {
// Set initial viewport height CSS variable
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
// Add optimization classes
const classes = [];
if (mobileDetection.isMobile) classes.push('is-mobile');
if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
if (mobileDetection.isIOS) classes.push('is-ios');
if (isMobile) classes.push('is-mobile');
if (isMobileSafari) classes.push('is-mobile-safari');
if (isIOS) classes.push('is-ios');
// Add classes to document element
if (classes.length > 0) {
@@ -36,8 +38,4 @@ export default defineNuxtPlugin(() => {
// Mark fixes as applied
fixesApplied = true;
}
// Note: We're NOT applying fixes on route changes anymore
// as this was causing the reload loop. The composable handles
// all necessary viewport updates.
});