Window: свойство innerWidth

Базовая Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Только для чтения Window свойство innerWidth возвращает внутреннюю ширину окна в пикселях (то есть ширину области макета viewport окна). Включает ширину вертикальной полосы прокрутки, если она есть.

Аналогично, внутренняя высота окна (то есть высота области макета viewport) может быть получена с помощью свойства innerHeight. Эта величина также учитывает высоту горизонтальной полосы прокрутки, если она видна.

Значение

Целое число, указывающее ширину области макета viewport окна в пикселях. Это свойство только для чтения и не имеет значения по умолчанию.

Чтобы изменить ширину окна, используйте один из методов Window для изменения размеров окна, например, resizeBy() или resizeTo().

Примечания по использованию

Если вам нужно получить ширину окна минус полосу прокрутки и границы, используйте свойство <html> корневого элемента clientWidth вместо этого.

Свойство innerWidth доступно для любого окна или объекта, который ведет себя как окно, такого как фрейм или вкладка.

Примеры

// This will log the width of the viewport
console.log(window.innerWidth);

// This will log the width of the frame viewport within a frameset
console.log(self.innerWidth);

// This will log the width of the viewport of the closest frameset
console.log(parent.innerWidth);

// This will log the width of the viewport of the outermost frameset
console.log(top.innerWidth);

Демо

HTML

<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>

JavaScript

const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);

Результат

Вы также можете посмотреть результаты демо-кода на отдельной странице.

Спецификации

Спецификация
Модуль CSSOM View # dom-window-innerwidth

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в IOS	Samsung Internet	WebView Android
`innerWidth`	1	12	1 В версиях с 4 по 24 это свойство могло возвращать неверное значение до загрузки страницы в определённых ситуациях (см. ошибку 641188).	9	3	18	4 В версиях до 24 это свойство могло возвращать неверное значение до загрузки страницы в определённых ситуациях (см. ошибку 641188).	10.1	1 Это свойство возвращает ширину визуального viewport, а не области макета viewport. Подробнее см. ошибку 174362.	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth