monacousa-portal/plugins/03.mobile-safari-fixes.client.ts

/**
 * Mobile Safari Fixes Plugin
 * Applies mobile Safari specific optimizations on client side
 * Now uses unified mobile detection to prevent conflicts
 */

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();
    
    // Apply initial fixes only for mobile Safari
    if (mobileDetection.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');
      
      // Add classes to document element
      if (classes.length > 0) {
        document.documentElement.classList.add(...classes);
      }
    }
    
    // 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.
});