Принудительный режим ориентации «пейзаж»

Теперь это возможно с помощью манифеста веб-приложения HTML5. См. ниже.

Исходный ответ:

Вы не можете заблокировать веб-сайт или веб-приложение в определенной ориентации. Это противоречит естественному поведению устройства.

Вы можете определить ориентацию устройства с помощью мультимедийных запросов CSS3 следующим образом:

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

Или привязав событие изменения ориентации JavaScript следующим образом:

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

Обновление от 12 ноября 2014 г.: теперь это возможно с помощью манифеста веб-приложения HTML5.

Как описано в html5rocks.com, теперь вы можете принудительно включить режим ориентации с помощью файла manifest.json.

Вам нужно включить эти строки в файл json:

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

И вам нужно включить манифест в свой html-файл следующим образом:

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

Не совсем уверен, какая поддержка в манифесте веб-приложения для режима блокировки ориентации, но Chrome определенно там. Обновлю, когда у меня будет информация.

screen.orientation.lock('landscape');

Заставит его перейти в ландшафтный режим и остаться в нем. Проверено на Nexus 5.

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

Я использую такой CSS (на основе приемов 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;
  }
}

У меня была та же проблема, это был отсутствующий файл manifest.json, если он не был найден, браузер решил, что ориентация лучше всего подходит, если вы не укажете файл или используете неправильный путь.

Я исправил только правильный вызов manifest.json для заголовков html.

Мои заголовки 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">

И содержимое файла 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"
  }
}

Для создания фавиконов и значков используйте этот веб-инструмент: https://realfavicongenerator.net/

Для создания файла манифеста используйте: https://tomitm.github.io/appmanifest/

Мой PWA отлично работает, надеюсь, поможет!