как определить ориентацию экрана и вывести сообщение на javascript
Ответы
Можно использовать объект window и его свойства, а также события, связанные с изменением ориентации. Ориентация экрана может быть "портретной" (portrait) или "ландшафтной" (landscape).
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Определение Ориентации Экрана</title>
<style>
#message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #000;
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
display: none; /* Скрыть сообщение по умолчанию */
}
</style>
</head>
<body>
<div id="message"></div>
<script>
function checkOrientation() {
let messageElement = document.getElementById('message');
if (window.innerHeight > window.innerWidth) {
messageElement.textContent = "Портретная ориентация";
} else {
messageElement.textContent = "Ландшафтная ориентация";
}
messageElement.style.display = "block"; // Показываем сообщение
}
// Проверим ориентацию при загрузке страницы
window.addEventListener('load', checkOrientation);
// Обработаем изменение размеров окна
window.addEventListener('resize', checkOrientation);
</script>
</body>
</html>
В примере создается простой элемент div для отображения сообщения об ориентации. Стиль для сообщения, чтобы оно было в центре экрана.
Функция checkOrientation(): проверяет ориентацию, сравнивая window.innerHeight и window.innerWidth. Если высота больше ширины — это портретная ориентация, иначе — ландшафтная.
Используется событие load для первоначальной проверки и событие resize для реагирования на изменения размеров окна.
0
0