feat(pwa): add mobile optimizations (safe areas, touch targets, standalone mode)
This commit is contained in:
@@ -146,3 +146,29 @@
|
||||
background: oklch(0.5 0 0 / 35%);
|
||||
}
|
||||
}
|
||||
/* Mobile/PWA Optimizations */
|
||||
html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
|
||||
|
||||
/* iOS Safe Areas */
|
||||
body { 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); }
|
||||
|
||||
/* Prevent zoom on input focus */
|
||||
input, select, textarea { font-size: 16px; }
|
||||
|
||||
/* Hide scrollbar on mobile */
|
||||
@media (max-width: 768px) {
|
||||
::-webkit-scrollbar { display: none; }
|
||||
body { scrollbar-width: none; }
|
||||
}
|
||||
|
||||
/* Minimum touch target 44x44px */
|
||||
button, a, input, select, textarea, [role="button"] { min-height: 44px; min-width: 44px; }
|
||||
|
||||
/* Disable hover effects on touch devices */
|
||||
@media (hover: none) { *:hover { transform: none !important; } }
|
||||
|
||||
/* PWA standalone mode styles */
|
||||
@media (display-mode: standalone) {
|
||||
html { height: 100vh; height: 100dvh; }
|
||||
body { overflow: hidden; position: fixed; width: 100%; height: 100%; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user