6.5 KiB

Raw Blame History

Mobile Zoom Prevention - Angular IDT App

🎯 Objetivo

Implementar prevenção completa de zoom em dispositivos móveis para proporcionar uma experiência nativa similar a apps nativos, bloqueando zoom por double-tap e pinch gestures.

🚫 Comportamentos Bloqueados

Zoom Gestures

❌ Double-tap zoom: Dois toques rápidos na tela
❌ Pinch zoom: Gesto com dois dedos (aproximar/afastar)
❌ Keyboard zoom: Ctrl +/- no desktop
❌ Scroll zoom: Ctrl + scroll wheel

Mobile Safari Específico

❌ Auto-zoom em inputs: Zoom automático ao focar inputs
❌ Text selection highlights: Seleção visual indesejada
❌ Tap highlights: Destaque azul no toque

✅ Funcionalidades Preservadas

Navegação Essencial

✅ Scroll vertical/horizontal: Navegação normal
✅ Swipe gestures: Para carousels e navegação
✅ Text selection: Em inputs e áreas editáveis
✅ Touch feedback: Resposta visual aos toques

Áreas Scrolláveis

✅ Data tables: Scroll horizontal preservado
✅ Sidebars: Navegação em drawers
✅ Modals: Scroll em conteúdo longo

🔧 Implementação Técnica

1. Meta Tags (index.html)

<!-- Viewport com zoom desabilitado -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

<!-- Previne detecção automática -->
<meta name="format-detection" content="telephone=no">
<meta name="mobile-web-app-capable" content="yes">

<!-- Safari iOS específico -->
<meta name="apple-touch-fullscreen" content="yes">

2. CSS Global (app.scss)

/* Base - Previne zoom */
html, body {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Inputs - Permite interação mas previne auto-zoom */
input, textarea, select, [contenteditable] {
  user-select: text;
  font-size: 16px !important; /* Crítico para iOS */
  -webkit-appearance: none;
}

/* Botões e links */
button, a, [role="button"] {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* Data tables - Permite scroll */
.data-table-container {
  touch-action: pan-y pan-x;
}

3. JavaScript Service (MobileBehaviorService)

@Injectable({ providedIn: 'root' })
export class MobileBehaviorService {
  
  constructor() {
    this.initializeMobilePrevention();
  }

  private preventZoom(): void {
    // Previne pinch gestures
    document.addEventListener('gesturestart', this.preventGesture, { passive: false });
    document.addEventListener('gesturechange', this.preventGesture, { passive: false });
    
    // Previne double-tap
    let lastTouchEnd = 0;
    document.addEventListener('touchend', (e) => {
      const now = Date.now();
      if (now - lastTouchEnd <= 300) {
        e.preventDefault();
      }
      lastTouchEnd = now;
    }, { passive: false });
  }
}

📱 Testes por Dispositivo

iOS (Safari/Chrome)

Double-tap: ❌ Bloqueado
Pinch: ❌ Bloqueado
Auto-zoom inputs: ❌ Bloqueado (font-size 16px)
Text selection: ✅ Funciona em inputs

Android (Chrome/Firefox)

Double-tap: ❌ Bloqueado
Pinch: ❌ Bloqueado
Scroll: ✅ Preservado
Navigation: ✅ Normal

Desktop (Chrome/Firefox/Edge)

Ctrl + scroll: ❌ Bloqueado
Ctrl +/-: ❌ Bloqueado
Mouse scroll: ✅ Normal
Keyboard nav: ✅ Normal

🧪 Como Testar

1. Mobile Device Testing

# Build e serve da aplicação
npm run build:prafrota
npx http-server dist/idt_app -p 8080 --ssl

# Acessar em mobile: https://[seu-ip]:8080

2. Desktop Mobile Simulation

# Chrome DevTools
1. F12 > Toggle Device Toolbar
2. Selecionar dispositivo mobile
3. Testar gestures com mouse simulando touch

3. Testes Específicos

Double-tap Test:

Tocar rapidamente duas vezes em qualquer área
Esperado: Não deve fazer zoom

Pinch Test:

Usar dois dedos/mouse para pinch gesture
Esperado: Não deve fazer zoom

Input Test:

Focar em um input no mobile
Esperado: Não deve fazer auto-zoom

Scroll Test:

Scroll em data tables e listas
Esperado: Deve funcionar normalmente

🐛 Troubleshooting

Zoom ainda funciona

// Verificar se service está injetado
console.log('MobileBehaviorService:', this.mobileBehaviorService.getDeviceInfo());

// Verificar meta viewport
const viewport = document.querySelector('meta[name="viewport"]');
console.log('Viewport:', viewport?.getAttribute('content'));

Input faz auto-zoom (iOS)

/* Garantir font-size mínimo */
input, textarea, select {
  font-size: 16px !important;
  max-zoom: 1;
}

Scroll não funciona em área específica

/* Adicionar classe específica */
.scrollable-area {
  touch-action: pan-y pan-x;
  overflow: auto;
}

Pull-to-refresh ainda ativo

// Verificar se elemento está em área scrollável
const isScrollable = element.closest('.data-table-container');

📊 Impacto na Performance

Bundle Size

MobileBehaviorService: ~3kB
CSS Rules: ~1kB
Event Listeners: Minimal overhead
Total Impact: ~4kB

Runtime Performance

Event Prevention: Micro-optimized
Memory Usage: Negligible
Battery Impact: None
Accessibility: Preserved

🔄 Configurações Avançadas

Seletiva por Componente

// Desabilitar em componente específico
@Component({
  host: {
    'style': 'touch-action: auto'
  }
})

Debug Mode

// Ver informações do dispositivo
console.log(this.mobileBehaviorService.getDeviceInfo());

Orientação Forçada

// Bloquear em portrait (opcional)
this.mobileBehaviorService.lockToPortrait();

📋 Checklist de Implementação

Meta Tags

viewport com user-scalable=no
maximum-scale=1.0
format-detection=telephone=no
apple-touch-fullscreen=yes

CSS Rules

touch-action: manipulation global
font-size: 16px em inputs
user-select configurado
tap-highlight removido

JavaScript Prevention

gesturestart/change/end listeners
double-tap prevention
keyboard zoom prevention
pull-to-refresh control

Testing

Mobile device real testing
iOS Safari verification
Android Chrome verification
Desktop simulation

Status: ✅ Zoom Prevention Implementado Compatibilidade: iOS 12+, Android 6+, Desktop browsers Última atualização: Janeiro 2025

6.5 KiB Raw Blame History