/** * Mobile-first e hint dispositivo (UA server + viewport client). * Attributi su : data-server-device, data-viewport, data-pointer, data-touch */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #main-content { padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } img, video, canvas, svg { max-width: 100%; height: auto; } .app-main, .app-content { min-width: 0; } /* Contenuti larghi (tabelle, editor): scroll orizzontale invece di overflow pagina */ .content-safe-width, .table-responsive, .overflow-touch-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Hint UA: tipografia leggermente più comoda su phone/tablet */ html[data-server-device="mobile"] body, html[data-server-device="tablet"] body { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); } /* Viewport stretto: padding contenuti principali (allinea a breakpoint 768px in style.css) */ @media (max-width: 768px) { .container { padding-left: max(var(--bs-gutter-x, 0.75rem), env(safe-area-inset-left, 0px)); padding-right: max(var(--bs-gutter-x, 0.75rem), env(safe-area-inset-right, 0px)); } } html[data-viewport="narrow"] .app-content { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } /* Touch / puntatore grossolano: target minimo ~44px (accessibilità) */ @media (pointer: coarse) { .btn:not(.btn-sm) { min-height: 44px; align-items: center; } .sidebar-nav-item { min-height: 44px; } } html[data-touch="yes"] .form-control:not(textarea) { font-size: 16px; } /* Classi utility opzionali nei template: {% if prefers_mobile_layout %}…{% endif %} */ .layout-touch-first .modal-dialog { margin: 0.75rem auto; }