Как запретить альбомный режим при просмотре сайта?

Question

[Денис]

Как запретить альбомный режим при просмотре сайта? Т.е. чтобы пользователь не смог перевернуть телефон и переключиться на другой вид

Comments

[Ankhena]

За что?

[Сергей Миллер]

Например когда используется процентная верстка, а инфы слишком много для маленьких экранов

Answer 1

[Денис Инешин]

Блокировка портретного режима - это на 100% пользовательская настройка, которую можно включить в своем телефоне.

Вы не должны этого хотеть для всех пользователей. Это аналог выстрела себе в ногу, так как миллионы людей любят пользоваться именно этим режимом, вместо привычного вам вертикального.

Comments

[Vladimir251]

Кажется был задан конкретный вопрос, вместо ответа общие рассуждения, почему Вы не должны этого хотеть. Хочу запретить в Opera поворот экрана в альбом. Он любит делать это совершенно непредсказуемо, при отключенном повороте экрана в смартфоне, при чтении обычного текста.

Answer 2

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/CSS/M...
+ мозги
Если очень нужно запретить можно добавить магии
https://developer.mozilla.org/en-US/docs/Web/CSS/t...

Answer 3

[Антон]

Юзаем media query, показываем оверлей с просьбой перевернуть телефон

Answer 4

[Сергей Миллер]

/*типа запрет ротации моб устройства*/
@media only screen and (min-width: 415px) and (max-width: 1279px) {
body{display:none} html:before{content:'Переверните устройство в портретный режим или откройте сайт с компьютера.';position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;background:#fff;z-index:999;text-align:center;width:80%;height:100px} 
}

Answer 5

[Владислав]

Вот тут описаны три способа это сделать. В каждом есть плюсы и минусы.

Скрипт работает только в полноэкранном режиме браузера, что лишает человека возможности внешней браузерной навигации. Сайт превращается в подобие приложения, где есть только внутренняя навигация по сайту.
Вариант с CSS крайне сложный. Сам поворот делается парой строк, но если ваш сайт адаптивный на media-запросах, зависящих от ширины экрана, то придётся переписывать все стили, т.к. при повороте сайт поворачивается в обратную сторону, и типа, всё норм. Но из-за изменения размеров экрана срабатывают адаптивные стили и все ломается.

Ну а третий вариант с просьбой не переворачивать телефон (или повернуть его как надо) похож на тот молдавский вирус, который просит пользователя удалить что-нибудь важное на своём компьютере, т.к. у его создателя нет денег, чтобы написать нормальный вирус.