Orientación portrait significa que la pantalla es más alta que ancha (la altura es mayor que el ancho). La orientación landscape es lo opuesto: más ancha que alta. El portrait es típico en feeds, artículos, formularios y chats. El landscape es ideal para video, mapas y dashboards que requieren espacio horizontal. El aspect ratio (como 9:16 portrait o 16:9 landscape) describe la relación ancho-alto; la orientación solo indica qué lado es más largo.
Ejemplo de portrait vs landscape
Si buscas una imagen de orientación portrait, la idea es esta vista comparativa: un marco alto y uno ancho en la misma clase de dispositivo.
El portrait concentra la atención en un scroll vertical. El landscape permite más columnas y una UI lateral. Son contextos de layout, no solo etiquetas de rotación.
| Orientación | Forma | Usos comunes |
|---|---|---|
| Vertical | Más alto que ancho | Feeds, lectura, formularios, chat |
| Horizontal | Más ancho que alto | Video, mapas, gráficos, juegos |
La orientación no es lo mismo que la resolución o el aspect ratio. Dos dispositivos pueden estar en vertical usando distintos tamaños de píxel y proporciones. Los layouts responsive deben basarse en la forma del viewport, no en un único modelo de teléfono.
Orientación vertical en CSS
Usa CSS cuando la rotación deba cambiar el espaciado o la estructura. La @media (orientation: portrait) query coincide con viewports donde la altura es mayor que la anchura. MDN lo documenta en características de medios en orientación.
/* Default: portrait-first single column */
.page {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sidebar {
display: none;
}
@media (orientation: landscape) {
.page {
grid-template-columns: 280px 1fr;
}
.sidebar {
display: block;
}
}
@media (orientation: portrait) {
.hero {
padding-block: 24px;
}
}Empieza por la orientación que ven la mayoría de los usuarios y luego añade reglas para landscape. Evita alturas de viewport fijas que se rompan al aparecer el teclado o el chrome del navegador. Prueba formularios y sticky headers en ambas orientaciones en hardware real.
Para JavaScript que deba reaccionar a la rotación (gráficos, mapas, shells personalizados), escucha screen.orientation eventos de cambio o compara window.innerHeight a window.innerWidth. Mantén el layout en CSS siempre que sea posible.
Bloquear la orientación en apps móviles y Capacitor
Los navegadores tratan el bloqueo de orientación como una preferencia. Las apps nativas y Capacitor los proyectos pueden forzar la dirección de pantalla por vista cuando la rotación afecte la tarea (login, pagos, flujos de kiosk).
El @capgo/capacitor-screen-orientation el plugin lee el modo actual, bloquea portrait para una ruta y lo desbloquea al salir de esa pantalla. Consulta el Docs del plugin Screen Orientation para más detalles de API.
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.lock({ orientation: 'portrait' });
const { type } = await ScreenOrientation.orientation();
console.log(type);
await ScreenOrientation.unlock();Bloquea con moderación. Si la rotación solo cambia el espaciado, adapta el layout. Al bloquear, vincúlalo lock y unlock al ciclo de vida de la página para que las pantallas de medios y ajustes sigan usando landscape. Para patrones de layout en iOS y Android, consulta mejores prácticas de UI y UX multiplataforma para apps Capacitor.
FAQ
¿Qué es la orientación portrait?
La orientación portrait significa que la pantalla es más alta que ancha. La altura es mayor que la anchura, por lo que los bordes largos quedan verticales. Los teléfonos que se sostienen en vertical para leer, chatear o hacer scroll suelen estar en portrait.
¿Cuál es la diferencia entre orientación portrait y landscape?
Portrait es más alto que ancho. Landscape es más ancho que alto. El mismo dispositivo cambia entre ambas al rotarlo, pero el aspect ratio y el espacio de layout cambian, por lo que la UI debe adaptarse en lugar de solo estirarse.
¿Cómo uso @media (orientation: portrait) en CSS?
Añade una media query con @media (orientation: portrait) { ... } para aplicar estilos cuando la altura del viewport supere su anchura. Combínalo con reglas de layout para landscape usando @media (orientation: landscape) cuando necesites ambos formatos.
¿Qué significa cambiar la orientación en un teléfono o app?
Cambiar la orientación significa rotar el dispositivo o permitir que la app rote para que la pantalla pase entre portrait y landscape. En la web, las dimensiones del viewport se intercambian. En apps nativas y Capacitor, el OS también puede animar la transición y actualizar las safe areas.
¿Qué es la orientación del contenido?
La orientación del contenido es cómo se organiza el contenido respecto al marco, no solo cómo se sostiene el dispositivo. Una pantalla en portrait puede mostrar un gráfico ancho o un video con letterboxing. Adapta el layout y los medios a la tarea, no solo al ángulo por defecto del dispositivo.
¿Puedes mostrar un ejemplo de portrait vs landscape?
Sí. Portrait es un marco vertical donde la altura es mayor que el ancho. Landscape es un marco horizontal donde el ancho es mayor que la altura. Desliza hasta el diagrama en Ejemplo de portrait vs landscape para ver la imagen con etiquetas.
Si lanzas apps con Capacitor y necesitas controlar la orientación junto con correcciones rápidas tras el lanzamiento, Capgo vale la pena echarle un vistazo. Ofrece Live Updates para apps de CapacitorJS y Electron, y también mantiene plugins para funcionalidades como la orientación de pantalla, lo que ayuda a bloquear o habilitar vistas específicas sin tener que rehacer todo el proceso de release.
