🎨 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
This commit is contained in:
marcoitaloesp-ai
GitHub
parent
91300c9457
commit
2e45f29a06
24
CHANGELOG.md
24
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/).
|
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
|
## [1.39.0] - 2025-12-16
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<html lang="pt-BR">
|
<html lang="pt-BR">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<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 -->
|
<!-- Favicon -->
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
|
|||||||
@ -10,6 +10,14 @@ body {
|
|||||||
color: #f1f5f9;
|
color: #f1f5f9;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-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 */
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user