Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?

Question

[Сергей Кореневский]

Уважаемые Гуру дайте совет пожалуйста.
Имеется горизонтальный сайт, это особая программа для горизонтального просмотра.
Нужно при открытии сайта на смартфоне в вертикальном браузере развернуть сайт горизонтально.

@media screen and (max-width: 1100px) and (orientation: portrait){
body{
	rotate: 90deg;
	width: 100vh !important;
	height: 100vw !important;
}
}

Но странице в сторону уезжает, что делать?

Comments

[Максим]

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

[Сергей Кореневский]

Максим, А можете подсказать как именно?
Но возможно в нашем случае, надо
чтобы на смартфоне отображалось боком

[Максим]

Сергей Кореневский, я де не буду переписывать за вас и писать адаптивную часть css
Смотрите уроки читайте
Задавайте вопрос о том как делается такое.Но без кода ни кто и ни чего делать не будет

[Сергей Кореневский]

Максим, я Вас понимаю.
В вопросе я адаптивность уже написал.
Но напишите название свойства которое превращает в вертикальный.

[Максим]

Сергей Кореневский, нет, адаптивность это не то что вы написали ...
адаптивность - это по отдельности писать стили для каждого блока который у вас есть на сайте
все эти правила для вашего сайта пишуться вместе в столбик - примерно так:

@media screen (max-width: 968px){
 header{
 тыр пыр восемь дыр
}
.header_inner{
 тыр пыр и т далее 
}
}

и так шаг за шагом
и писать адаптивный сайт это долго и муторно и это на самом деле исскуство и что бы получить красивый современный дизайн приходится очень приличное время повозиться ...
у вас не так много элементов на странице и потому начинайте сразу ...
блок добавили и адаптировали согласно макета

[Сергей Кореневский]

Максим, Там очень много элементов, после того как игрок авторизуется.
там находится горизонетальная схема(карта) по которой двигаются фишки, и кидается кубик.
моя задача перевернуть сайт, чтобы горизонтальная карта повернулась на телефоне.
Спасибо за Ваш ценный совет. Я адаптивной версткой пользуюсь уже с десяток лет.
Но ни разу не приходилось сайт переворачивать и адаптировать.

[Uno]

не надо ничего поворачивать, так никто не делает, это тупо
определяй ориентацию экрана и при неверной - показывай блок "поверните смартфон"

Answer 1

[Сергей delphinpro]

Просто попросите пользователя повернуть телефон в нужное положение

@media screen and (hover: none) and (orientation: portrait){
  body::after {
    content: 'Поверните телефон в горизонтальное положение';
    z-index: 999999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

Comments

[Сергей Кореневский]

это уже просили, хочу исправить, чтобы не нужно было просить.

Answer 2

[dramsky]

не понимаю зачем поворачивать сам сайт, если можно переключить ориентацию страницы
Screen: orientation
ScreenOrientation: lock()

Comments

[Сергей Кореневский]

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

screen.orientation.lock('landscape');
но это Вызывает ошибку : "Uncaught (in promise) DOMException: The operation is insecure."
Если Вам не трудно подскажите что делаю не так.
И после Вызова, орриентация не меняется.