Forzar el modo de orientación "horizontal"


91

Estoy tratando de forzar el modo "paisaje" para mi aplicación porque mi aplicación no está diseñada para el modo "retrato". ¿Cómo puedo hacer eso?

Respuestas:


93

Ahora es posible con el manifiesto de la aplicación web HTML5. Vea abajo.


Respuesta original:

No puede bloquear un sitio web o una aplicación web en una orientación específica. Va en contra del comportamiento natural del dispositivo.

Puede detectar la orientación del dispositivo con consultas de medios CSS3 como esta:

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

O vinculando un evento de cambio de orientación de JavaScript como este:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

Actualización del 12 de noviembre de 2014: ahora es posible con el manifiesto de la aplicación web HTML5.

Como se explica en html5rocks.com , ahora puede forzar el modo de orientación usando un manifest.jsonarchivo.

Debe incluir esas líneas en el archivo json:

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

Y debe incluir el manifiesto en su archivo html como este:

<link rel="manifest" href="manifest.json">

No estoy exactamente seguro de cuál es el soporte en el manifiesto de la aplicación web para bloquear el modo de orientación, pero Chrome definitivamente está ahí. Se actualizará cuando tenga la información.


1
Sí, también las aplicaciones web. Incluso si "guarda" su sitio web en la pantalla de inicio del iPhone o iPad, la aplicación web cambiará su orientación.
Rémi Breton

2
Según caniuse.com, los manifiestos se pueden utilizar desde Android 4.1. Ver caniuse.com/#feat=offline-apps
Rémi Breton

1
¿Cómo puedo saber si se está llamando al manifiesto? No funciona para mí y no se muestra nada que se cargue en la red de mis herramientas de desarrollo a pesar de que el manifiesto está en el mismo lugar que el index.html donde está vinculado.
Ian S

3
En Chrome, ahora puede verificar la pestaña "Aplicación" en el modo Inspeccionar, hay una página "Manifiesto" con un enlace directo a su archivo json e información al respecto.
drskullster

1
@ RémiBreton - ¿Sigues buscando esa información, así que puedes actualizar? ¡Hemos estado esperando pacientemente durante años!
ashleedawg

46
screen.orientation.lock('landscape');

Lo obligará a cambiar y permanecer en modo horizontal. Probado en Nexus 5.

http://www.w3.org/TR/screen-orientation/#examples


3
No funciona en Android con el navegador de Internet predeterminado (no Chrome). ¿Alguna idea?
Antonios Tsimourtos

6
No implementado para Safari (iOS y macOS): caniuse.com/#feat=screen-orientation
MBach

3
Solo una nota rápida, esto solo funciona después de ingresar al modo de pantalla completa.
Thane Brimhall

2
Mozilla desaconseja este método: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation También tiene una compatibilidad de navegador muy pobre
Fernando García

1
Esto incluso no funciona en modo de pantalla completa en Chrome: |
Shamshirsaz.Navid

23

Utilizo algunos css como este (basado en trucos de css ):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

3
landscapeportrait@media screen and (orientation: portrait)
Usé

Editó la respuesta para ayudar a las personas futuras. La rotación debe aplicarse cuando el modo actual es portrait(para que pueda cambiar a landscape).
lfarroco

Gracias. He estado buscando algo como esto.
desvalido

¿Cómo podría aplicarlo solo en una sola página a través de page-id-xxx?
Homer

0

Tuve el mismo problema, faltaba un archivo manifest.json, si no se encuentra, el navegador decide con la orientación que se ajusta mejor, si no especifica el archivo o usa una ruta incorrecta.

Arreglé simplemente llamar al manifest.json correctamente en los encabezados html.

Mis encabezados html:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

Y el contenido del archivo manifest.json:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

Para generar sus favicons e íconos, use esta herramienta web: https://realfavicongenerator.net/

Para generar su archivo de manifiesto, use: https://tomitm.github.io/appmanifest/

Mi PWA funciona muy bien, ¡espero que te ayude!

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.