/**
* Mobile Viewport Configuration
*
* Reusable CSS for consistent mobile experience across all pages.
* Prevents unwanted zoom on input focus, horizontal scrolling, and
* provides app-like touch behavior.
*
* USAGE:
* 1. Add this viewport meta tag to your HTML :
*
*
* 2. Import this CSS file:
*
*
* NOTE: For hospital/medical software, preventing accidental zoom during
* data entry is critical for usability and reducing input errors.
*/
/* ==========================================================================
CSS Custom Properties for Viewport Handling
========================================================================== */
:root {
/* Dynamic viewport height - accounts for mobile browser chrome (address bar, etc.) */
--vh: 1vh;
/* Safe area insets for notched devices (iPhone X+, etc.) */
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-left: env(safe-area-inset-left, 0px);
--safe-area-right: env(safe-area-inset-right, 0px);
}
/* ==========================================================================
Global Reset for Mobile
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Prevent horizontal overflow at document level */
html {
overflow-x: hidden;
/* Prevent iOS overscroll bounce effect */
overscroll-behavior: none;
/* Use dynamic viewport height where supported */
height: 100%;
/* Prevent text size adjustment on orientation change */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
overflow-x: hidden;
/* Minimum height using dynamic viewport for mobile browsers */
min-height: 100vh;
min-height: 100dvh;
/* Prevent pull-to-refresh and overscroll on body */
overscroll-behavior-y: contain;
/* Optimize touch scrolling on iOS */
-webkit-overflow-scrolling: touch;
}
/* ==========================================================================
Input Zoom Prevention
iOS Safari automatically zooms when inputs have font-size < 16px.
Setting 16px minimum prevents this unwanted behavior.
========================================================================== */
input,
textarea,
select,
button {
/* Prevent iOS zoom on focus - must be 16px or larger */
font-size: 16px;
/* Remove default iOS styling */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Prevent text selection on touch hold for buttons */
-webkit-touch-callout: none;
}
/* Restore select dropdown arrow after appearance reset */
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
}
/* ==========================================================================
Touch Behavior Optimization
========================================================================== */
/* Disable tap highlight on touch devices */
* {
-webkit-tap-highlight-color: transparent;
}
/* Improve touch responsiveness */
button,
a,
[role='button'],
input[type='submit'],
input[type='button'],
input[type='reset'] {
touch-action: manipulation;
}
/* ==========================================================================
Scroll Lock Utility (for modals/overlays)
Apply .scroll-locked class to body to prevent background scrolling.
========================================================================== */
body.scroll-locked {
overflow: hidden !important;
position: fixed;
width: 100%;
height: 100%;
overscroll-behavior: none;
touch-action: none;
-webkit-overflow-scrolling: none;
}
/* iOS Safari specific scroll lock handling */
@supports (-webkit-touch-callout: none) {
body.scroll-locked {
position: fixed;
left: 0;
right: 0;
}
}
/* ==========================================================================
Safe Area Handling for Notched Devices
========================================================================== */
/* Apply safe area padding to body on notched devices */
@supports (padding: env(safe-area-inset-top)) {
body {
/* Respect safe areas on all sides */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Fixed elements at top should account for notch */
.fixed-top,
.sticky-header,
.sticky-header-wrapper {
padding-top: env(safe-area-inset-top, 0px);
}
/* Fixed elements at bottom should account for home indicator */
.fixed-bottom,
.sticky-footer {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
/* ==========================================================================
Container Constraints
========================================================================== */
/* Prevent any element from exceeding viewport width */
img,
video,
iframe,
embed,
object {
max-width: 100%;
height: auto;
}
/* Ensure tables don't cause horizontal scroll */
table {
max-width: 100%;
overflow-x: auto;
display: block;
}
/* Long text/URLs should wrap, not overflow */
.break-word,
input[type='url'],
input[type='email'],
input[type='text'] {
word-break: break-word;
overflow-wrap: break-word;
}
/* ==========================================================================
Accessibility Preferences
========================================================================== */
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
Form Layout Improvements for Mobile
========================================================================== */
/* Stack form elements vertically on mobile */
@media (max-width: 640px) {
.form-row,
.input-row,
.library-input-row,
.form-input-row {
flex-direction: column;
gap: 12px;
}
.form-row > *,
.input-row > *,
.library-input-row > *,
.form-input-row > * {
width: 100%;
}
}
/* ==========================================================================
Prevent Focus Outline Removal (Accessibility)
Only hide outline for mouse/touch users, keep for keyboard navigation.
========================================================================== */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}