JS властивість Window.outerHeight

Загальний опис

Властивість window.outerHeight в JavaScript відіграє важливу роль у визначенні розмірів вікна браузера. Ця властивість повертає зовнішню висоту вікна, включаючи області, такі як панель завдань, рамки вікна та інші елементи інтерфейсу браузера, які не входять до веб-контенту.

window.outerHeight є корисною для розробників, які потребують точного виміру зовнішніх розмірів вікна браузера. Ця інформація може бути використана для різноманітних цілей, включаючи адаптацію веб-інтерфейсу під різні розміри вікон, управління розміщенням вспливаючих вікон, а також для аналітичних цілей.

Застосування на практиці

1. Отримання зовнішньої висоти вікна: Використовуючи window.outerHeight, можна отримати повну зовнішню висоту вікна браузера.

   let outerHeight = window.outerHeight;
   console.log('Зовнішня висота вікна: ' + outerHeight + ' пікселів');
   

2. Адаптація інтерфейсу під розміри вікна: Розробники можуть використовувати цю властивість для адаптації дизайну веб-сторінки під різні розміри вікна браузера, наприклад, змінюючи розмір або розташування елементів інтерфейсу.

   if (window.outerHeight < 600) {
     // Змінити макет для невеликих вікон
   }
   

3. Управління вікнами: window.outerHeight може використовуватися для встановлення або зміни розмірів вікна при створенні вспливаючих вікон.

   let newWindow = window.open('https://example.com', 'ExampleWindow', 'height=500');
   newWindow.resizeTo(500, window.outerHeight);
   

4. Реагування на зміну розміру вікна: Розробники можуть використовувати window.outerHeight в обробниках подій для реагування на зміну розмірів вікна.

   window.onresize = function() {
     console.log('Нова зовнішня висота: ' + window.outerHeight);
   };
   

правити

Порада

Пам'ятайте, що значення, яке повертає Window.outerHeight, може змінюватися при зміні розмірів вікна браузера користувачем. Тому, якщо ваша веб-сторінка або додаток залежить від розмірів вікна, слід розглянути можливість використання обробників подій для відстеження змін розміру.

автор: Bond правити

Порада

Для початківців важливо розуміти, що Window.outerHeight відрізняється від Window.innerHeight, останнє повертає висоту області перегляду вмісту, не включаючи інтерфейсні елементи браузера. Це різниця має велике значення при проектуванні респонсивних інтерфейсів.

автор: Bond правити

Порада

У досвідчених програмістів, що працюють з комплексними веб-додатками, властивість Window.outerHeight може бути використана для умовного форматування або динамічного вибору стилів, в залежності від розміру вікна. Наприклад, якщо висота вікна менша певного значення, можна змінити макет або зміст для кращого відображення.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Window.outerHeight

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	9	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

// Отримання зовнішньої висоти вікна браузера
const outerHeight = window.outerHeight;

// Виведення інформації у консоль
console.log("Зовнішня висота вікна браузера становить:", outerHeight);

<header>
  <h2 class="title">Window.outerHeight</h2>
  <p class="description">Повертає зовнішню висоту вікна браузера, включаючи інтерфейсні елементи.</p>
</header>
<main>
  <div class="result">
    <button id="showHeight">Показати висоту вікна</button>
    <p id="output">Тут з'явиться висота вікна</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

document.getElementById('showHeight').addEventListener('click', function () {
  var height = window.outerHeight;
  document.getElementById('output').textContent = 'Висота вікна: ' + height + ' пікселів';
});
//# sourceURL=pen.js

// Функція для адаптивного масштабування контенту
function adjustContent() {
  const outerHeight = window.outerHeight;

  // Визначення розміру шрифту в залежності від висоти вікна
  const fontSize = outerHeight < 600 ? '14px' : '16px';

  // Застосування розміру шрифту до тіла документу
  document.body.style.fontSize = fontSize;
}

// Виклик функції під час завантаження сторінки
window.onload = adjustContent;

// Виклик функції при зміні розмірів вікна
window.onresize = adjustContent;