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

Добавляем в структуру HTML документа блок с сообщением о том, что пользователь неправильно держит устройство. Обычно в него ещё добавляется контейнер-обёртка для текста, а сам блок растягивается на весь экран при помощи:

position: fixed; top: 0; bottom: 0; left: 0; right: 0; 

По-умолчанию скрываем этот блок при помощи display: none; А при помощи media-запросов показываем, когда ориентация отлична от ожидаемой.

HTML:

<div class="warning-orientation">
    Переверните устройство
</div>

CSS:

.warning-orientaion {
    display: none;
    /* Other styles you need */
}
@media screen and (orientation="landscape") {
    .warning-orientation {
        display: block;
        /* Other styles you need */
    }
}