/* ============================================================ Websfera — CSS global aplicat a tots els clients Carregat des de /usr/share/kms/websfera/tpl/websfera-scripts.php ============================================================ */ /* ------------------------------------------------------------ SCROLL-SNAP global per a
en mòbil/tablet Cada
s'enganxa al scroll i ocupa tota la pantalla. ------------------------------------------------------------ */ /* Detecció de touch via JS (classe .touch-device a ) Més fiable que @media (pointer: coarse) o max-width per a iPadOS Safari, que des d'iPadOS 13 sovint es reporta com a desktop independentment de la resolució o l'orientació. */ /* Per touch-devices, NO usem scroll-snap CSS natiu: interfereix amb el JS de snap (a websfera-scripts.php) i causa comportaments imprevisibles, sobretot a iPad landscape. El JS implementa tot el snap de forma controlada. */ html.touch-device { scroll-behavior: smooth; scroll-padding-top: var(--websfera-header-h, 0px); } html.touch-device body section { /* scroll-margin-top respectat per scrollIntoView: deixa espai pel sticky header */ scroll-margin-top: var(--websfera-header-h, 0px); min-height: 100vh; /* fallback */ min-height: 100svh; box-sizing: border-box; } /* Editor preview: quan #device-wrapper té responsive-mobile/responsive-tablet */ #device-wrapper.responsive-mobile, #device-wrapper.responsive-tablet { scroll-snap-type: y mandatory; scroll-behavior: smooth; } #device-wrapper.responsive-mobile section, #device-wrapper.responsive-tablet section { scroll-snap-align: start; scroll-snap-stop: normal; min-height: 700px; box-sizing: border-box; }