Примусово орієнтуватися в альбомному режимі


91

Я намагаюся застосувати режим "альбомний" для моєї програми, оскільки моя програма абсолютно не розроблена для режиму "портрет". Як я можу це зробити?

Відповіді:


93

Тепер це можливо за допомогою маніфесту веб-програми 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">

Не зовсім впевнений, яка підтримка в маніфесті webapp для блокування режиму орієнтації, але Chrome точно є. Оновиться, коли я отримаю інформацію.


1
Так, веб-додатки теж. Навіть якщо ви "збережете" свій веб-сайт на головному екрані на iPhone або iPad, веб-програма змінить свою орієнтацію.
Ремі Бретон,

2
Відповідно до caniuse.com, маніфести можна використовувати з Android 4.1. Див. Caniuse.com/#feat=offline-apps
Ремі Бретон

1
Як я можу зрозуміти, чи викликається маніфест? Це не працює для мене, і нічого не показується, щоб бути завантаженим у Мережу моїх інструментів розробки, незважаючи на те, що маніфест знаходиться там же, де і index.html, де він зв’язаний.
Ян С

3
Тепер у Chrome ви можете перевірити вкладку "Програма" в режимі перевірки, є сторінка "Маніфест" із прямим посиланням на ваш файл json та інформацію про нього.
drskullster

1
@ RémiBreton - ти все ще шукаєш цю інформацію, тож ти можеш оновити? Ми терпляче чекали роками!
ashleedawg

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

Змусить його змінитись і залишитися в альбомному режимі. Перевірено на Nexus 5.

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


3
Не працює на Android за допомогою Інтернет-браузера за замовчуванням (не Chrome) - будь-які ідеї?
Антоніо Цімуртос

6
Чи не реалізовано для Safari (IOS і MacOS): caniuse.com/#feat=screen-orientation
MBach

3
Лише коротке зауваження, це працює лише після переходу в повноекранний режим.
Thane Brimhall

2
Mozilla не рекомендує використовувати цей метод: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Крім того, він має дуже погану сумісність з браузером
Фернандо Гарсія,

1
Це навіть не працює в повноекранному режимі в chrome: |
Шамширсаз. Навід

23

Я використовую такі 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;
  }
}

3
Я використав цю відповідь .. все, що мені потрібно зробити, це змінити медіа-запит з landscapeна, portraitі він працює, як очікувалось@media screen and (orientation: portrait)
ymz,

Відредаговано відповідь, щоб допомогти майбутнім людям. Поворот слід застосовувати, коли поточний режим portrait(щоб він міг перейти в landscape).
lfarroco

Дякую. Я шукав щось подібне.
underdog

Як я міг застосувати це лише на одній сторінці через page-id-xxx?
Гомер

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 чудово працює, сподіваюся, це допоможе!

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.