Forzar el modo de orientación "horizontal"

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?

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.

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

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;
  }
}

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!