Как сделать просьбу о повороте экрана в горизонтальное положение?

Question

[Антон Кудаев]

Как сделать просьбу о повороте экрана в горизонтальное положение? Видел на некоторых сайтах при загрузке просит повернуть телефон в противном случае окно не уходит. Заранее спасибо!

Comments

[archelon]

лучше, конечно, так не делать, а подстраиваться под экран пользователя.

Answer 1

[archelon]

С помощью медиазапросов orientation : landscape / portrait показывать или прятать блок
навскидку:

.alert {
display:none;
}
@media only screen 
and (max-device-width : 768px) 
and (orientation : portrait) {
.alert {
display:block
}

Comments

[Kate111]

Здравствуйте, вот я на сайте, простите, просто совсем не бельмес во всем этом, как мне это все сделать, то бишь как скрыть это окно о просьбе перевернуть окно в горизонтальное положение? Заранее спасибо

Answer 2

[timfcsm]

css

@media screen and (orientation: portrait) { 
показываем блок с просьбой
}

js

var screenOrientation  = orientationscreen.orientation || screen.mozOrientation || screen.msOrientation;

if (screenOrientation  === "portrait-primary" || Math.abs(window.orientation) !== 90) {
  показываем блок
}

или

if (window.innerWidth > window.innerHeight ) {
показываем блок
}

Comments

[Kate111]

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

[Kate111]

https://cmsmoscow.ru/education/srednee-professiona...
Сайт вот этот