🎨 v1.39.1 - Responsividade otimizada para iPhone/iOS

Otimizações específicas para melhorar UX em dispositivos iOS: VIEWPORT & SAFE AREAS: - viewport-fit=cover para suporte a notch/Dynamic Island - user-scalable=no para prevenir zoom acidental - Safe area insets em body, navbar e modais - @supports padding: max() para compatibilidade TOUCH TARGETS (Apple HIG): - Botões mínimos 44x44px - touch-action: manipulation (desabilita zoom duplo-toque) - tap-highlight otimizado (azul translúcido) INPUTS & FORMS: - font-size 16px para prevenir zoom automático no iOS - -webkit-appearance: none (reset iOS) - border-radius fixo (iOS reseta) SCROLL & PERFORMANCE: - overscroll-behavior-y: none (sem bounce) - -webkit-overflow-scrolling: touch (scroll suave) - Dropdowns com max-height e touch scrolling MEDIA QUERIES: - @media (max-width: 430px) - iPhone 14 Pro Max e menores - @media (max-height: 430px) - Landscape mode - Ajustes de fonte: 10pt base em telas pequenas - Padding/margins reduzidos - Canvas: 250px (portrait) / 180px (landscape) PWA: - @media (display-mode: standalone) - Remove bounce quando instalado Deploy: frontend/dist deployed to 213.165.93.60
2025-12-16 08:26:04 +00:00 · 2025-12-16 08:26:04 +00:00 · 2e45f29a06
commit 2e45f29a06
parent 91300c9457
4 changed files with 233 additions and 2 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,6 +5,30 @@ O formato segue [Keep a Changelog](https://keepachangelog.com/pt-BR/).
 Este projeto adota [Versionamento Semântico](https://semver.org/pt-BR/).


+## [1.39.1] - 2025-12-16
+
+### Fixed
+- **Responsividade iPhone** - Otimizações para telas verticais iOS
+  - Viewport otimizado: viewport-fit=cover, user-scalable=no
+  - Safe Area Insets: suporte completo para notch e Dynamic Island
+  - Touch targets mínimos de 44x44px (Apple Human Interface Guidelines)
+  - Inputs com font-size 16px para prevenir zoom automático no iOS
+  - Previne bounce scroll (overscroll-behavior-y: none)
+  - -webkit-overflow-scrolling: touch para scroll suave
+  - Media queries específicas para iPhone (max-width: 430px)
+  - Landscape mode otimizado (max-height: 430px)
+  - Reduz padding/margens em telas <430px
+  - Canvas gráficos: max-height 250px (portrait) / 180px (landscape)
+  - Tap highlight otimizado: rgba azul translúcido
+  - Dropdowns com max-height e touch scrolling
+  - Modais ajustados para safe area (notch/island)
+  - Remove bounce quando instalado como PWA (display-mode: standalone)
+
+### Changed
+- **Tamanhos de fonte** ajustados para iPhone: 10pt base em telas <430px
+- **Cards e modais** com padding reduzido em telas pequenas
+- **Tabelas** com fonte 10pt e padding compacto em mobile
+
 ## [1.39.0] - 2025-12-16

 ### Added
--- a/2
+++ b/2
@ -1 +1 @@
-1.39.0
+1.39.1
--- a/frontend/index.html
+++ b/frontend/index.html
@ -2,7 +2,7 @@
 <html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -10,6 +10,14 @@ body {
  color: #f1f5f9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  /* iOS Safe Area Support */
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+  /* Previne bounce scroll no iOS */
+  overscroll-behavior-y: none;
+  -webkit-overflow-scrolling: touch;
 }

 /* Tamanhos mínimos para elementos de texto - mínimo 11pt */
@ -2421,3 +2429,202 @@ input[type="color"]::-webkit-color-swatch {
  }
 }

+/* ==============================================
+   🍎 iOS / iPhone Specific Optimizations
+   ============================================== */
+
+/* Touch targets mínimos de 44x44px (Apple HIG) */
+.btn, 
+.btn-sm,
+.btn-lg,
+button, 
+a.btn,
+.form-check-input,
+.form-switch .form-check-input,
+.dropdown-toggle,
+.nav-link {
+  min-height: 44px;
+  min-width: 44px;
+  touch-action: manipulation; /* Desabilita zoom duplo-toque */
+}
+
+/* Cards e containers em telas pequenas */
+@media (max-width: 576px) {
+  .card {
+    margin-bottom: 1rem;
+  }
+  
+  .card-body {
+    padding: 1rem;
+  }
+  
+  /* Reduz padding em modais para mais espaço */
+  .modal-body {
+    padding: 1rem;
+  }
+  
+  .modal-header {
+    padding: 0.75rem 1rem;
+  }
+  
+  .modal-footer {
+    padding: 0.75rem 1rem;
+  }
+  
+  /* Ajusta gráficos para telas pequenas */
+  canvas {
+    max-height: 250px !important;
+  }
+}
+
+/* Otimizações para iPhone em modo portrait */
+@media (max-width: 430px) {
+  /* iPhone 14 Pro Max e menores */
+  
+  /* Ajusta tamanho de fonte para melhor legibilidade */
+  body {
+    font-size: 10pt;
+  }
+  
+  h1 { font-size: 1.5rem; }
+  h2 { font-size: 1.35rem; }
+  h3 { font-size: 1.25rem; }
+  h4 { font-size: 1.15rem; }
+  h5 { font-size: 1rem; }
+  h6 { font-size: 0.95rem; }
+  
+  /* Reduz padding global */
+  .container,
+  .container-fluid {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  
+  /* Otimiza stat cards */
+  .stat-card .card-body {
+    padding: 0.75rem !important;
+  }
+  
+  /* Tabelas responsivas */
+  .table {
+    font-size: 10pt;
+  }
+  
+  .table td,
+  .table th {
+    padding: 0.5rem 0.25rem;
+  }
+  
+  /* Ajusta inputs e selects */
+  .form-control,
+  .form-select {
+    font-size: 16px !important; /* Previne zoom no iOS */
+    padding: 0.625rem 0.75rem;
+  }
+  
+  /* Botões em telas muito pequenas */
+  .btn {
+    padding: 0.625rem 0.875rem;
+  }
+  
+  /* Gráficos ainda menores */
+  canvas {
+    max-height: 220px !important;
+  }
+}
+
+/* iPhone em landscape (horizontal) */
+@media (max-height: 430px) and (orientation: landscape) {
+  /* Reduz altura de elementos */
+  .card-body {
+    padding: 0.75rem;
+  }
+  
+  .modal-dialog {
+    max-height: 90vh;
+  }
+  
+  .modal-body {
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+  
+  canvas {
+    max-height: 180px !important;
+  }
+}
+
+/* Previne problemas de input no iOS */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+select,
+textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 0.375rem; /* iOS reseta border-radius */
+}
+
+/* Fix para dropdowns em iOS */
+.dropdown-menu {
+  -webkit-overflow-scrolling: touch;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+}
+
+/* Melhora scroll em listas/tabelas */
+.table-responsive,
+.overflow-auto {
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Previne seleção acidental de texto ao tocar */
+.btn,
+.card-header,
+.modal-header,
+.alert {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+/* Melhora tap highlight no iOS */
+button,
+a,
+.btn,
+.clickable {
+  -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
+}
+
+/* Safe area para notch/Dynamic Island */
+@supports (padding: max(0px)) {
+  body {
+    padding-top: max(env(safe-area-inset-top), 0px);
+    padding-bottom: max(env(safe-area-inset-bottom), 0px);
+    padding-left: max(env(safe-area-inset-left), 0px);
+    padding-right: max(env(safe-area-inset-right), 0px);
+  }
+  
+  /* Ajusta navbar fixa com safe area */
+  .navbar {
+    padding-top: calc(0.5rem + env(safe-area-inset-top));
+  }
+  
+  /* Ajusta modais com safe area */
+  .modal-dialog {
+    margin-top: calc(1.75rem + env(safe-area-inset-top));
+    margin-bottom: calc(1.75rem + env(safe-area-inset-bottom));
+  }
+}
+
+/* PWA: Remove bounce scroll quando instalado */
+@media (display-mode: standalone) {
+  body {
+    overscroll-behavior: none;
+  }
+}
+
 @ -1 +1 @@
 .39.0
 .39.1