Как при переворачивании экрана писать предупреждение?

Question

[marinkas]

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

Comments

[twobomb]

orientation

Answer 1

[Aetae]

body::after {
  display: none;
  content: 'Переверни!';
  position: fixed;
  bottom: 50vh;
  right: 50vw;
  transform: translate(50%, 50%);
  z-index: 1000;
}

@media (orientation: portrait) {
  body::after {
    display: block;
  }
}