Силовой режим "Пейзаж"

Ответ 1

Теперь это возможно с манифестом webapp 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 ноября: теперь это возможно с манифеста Webapp 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">

Не совсем уверен, что такое поддержка в манифесте webapp для блокировки режима ориентации, но Chrome определенно существует. Будет обновляться, когда у меня есть информация.

Ответ 2

screen.orientation.lock('landscape');

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

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

Ответ 3

У меня была та же проблема, это был отсутствующий файл 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 отлично работает, надеюсь, это поможет!

Ответ 4

Я использую некоторые CSS, как это (на основе трюков CSS):

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