F97Bloquear la web o la app en vertical u horizontal

Por qué es importante

Algunas personas llevan la tableta o el móvil fijo en un soporte, por ejemplo en el brazo de una silla de ruedas eléctrica. No pueden girarlo.

Si la web solo se ve en vertical y el soporte está en horizontal, el texto queda de lado o aparece un aviso de «Gire su dispositivo». La persona no puede usar la web. Pasa lo mismo a quien tiene poca movilidad en las manos o a quien prefiere una orientación porque ve mejor así.

Cómo evitarlo

1. Diseñe la página para que se adapte a cualquier ancho y alto, con diseño adaptable (responsive).
2. No gire el contenido con CSS (por ejemplo, con transform: rotate(90deg)) dentro de una consulta @media (orientation: …).
3. No muestre mensajes que obliguen a girar el dispositivo para ver el contenido.
4. No bloquee la orientación con JavaScript (screen.orientation.lock()) ni en el manifiesto de la aplicación web.
5. Solo limite la orientación si es esencial, como en un cheque bancario o un piano virtual.

Cómo comprobarlo

1. Abra la página en un móvil o una tableta en vertical. Compruebe que el contenido se ve derecho y completo.
2. Gire el dispositivo a horizontal y compruebe lo mismo.
3. Si no tiene dispositivo, use el modo de dispositivo de las herramientas del navegador (F12) y el botón de girar.
4. Si solo funciona en una orientación, pregúntese si es imprescindible. Si no lo es, hay fallo.

Ejemplo

Este CSS gira toda la página cuando el móvil está en horizontal y provoca el fallo.

/* Incorrecto: fuerza la vista vertical */
@media (orientation: landscape) {
  body {
    transform: rotate(-90deg);
  }
}