/* ============================================================ MODO APP (móvil) Que la web se comporte como una app y no como una página que se estira: sin zoom, sin el destello gris al tocar y sin el menú de «mantener pulsado» sobre botones, enlaces e imágenes. Tampoco se mueve hacia los lados: la página va solo de arriba abajo. El rebote y el «tirar para recargar» se dejan como los trae el móvil, a propósito: se probó a quitarlos y se echaban de menos (en iPhone y en Android es un gesto de uso diario). Va en TODAS las páginas junto con modo-app.js y la etiqueta viewport con maximum-scale=1 y user-scalable=no. Hacen falta las tres: Android obedece a la etiqueta, pero Safari en iPhone la ignora desde iOS 10 para el pellizco, y ahí mandan `touch-action` (esta hoja) y el JS. El escritorio no se ve afectado: Ctrl + rueda sigue ampliando. ============================================================ */ html { /* Solo desplazar: ni pellizco ni doble toque para ampliar. Los hijos no pueden permitir más de lo que permite el , así que basta aquí. */ touch-action: pan-x pan-y; /* Que el móvil no agrande el texto por su cuenta al girar la pantalla. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* ---------- Sin desplazamiento lateral ---------- `clip` en Y en , los dos. Es delicado: style.css y portada.css ya ponen `overflow-x: hidden` al . Mientras el no tiene overflow, el navegador aplica esa regla a la ventana y no pasa nada. Pero en cuanto el lleva cualquier overflow, el deja de pasársela a la ventana y, con `hidden`, se convierte en una caja con scroll propio. Dentro de ella `position: sticky` deja de pegarse: la sección de los cuatro canales (y el móvil en 3D que la sigue) se iba hacia arriba y se quedaba en negro. Pasó al poner solo `html, body { overflow-x: clip }`, porque la clase `.pt` del le ganaba a `body` y lo dejaba en `hidden`. `clip` recorta igual que `hidden` pero no crea caja de scroll, así que los sticky siguen funcionando. `html > body[class]` está para ganar a `.pt` y a `body` de style.css, que se cargan después que esta hoja. */ html, html > body, html > body[class] { overflow-x: clip; } @media (hover: none) and (pointer: coarse) { /* La interfaz no se selecciona ni saca el menú de copiar/abrir al mantenerla pulsada. El texto corrido sí: un correo o una dirección se tienen que poder copiar. */ a, button, label, summary, nav, header, footer nav, .btn, [role="button"], [role="tab"], [role="menuitem"], img, svg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } img { -webkit-user-drag: none; } input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } }