как определить размеры окна браузера в javascript

Question

Maksim Litvinov · Answer

Для определения размеров окна браузера в JavaScript вы можете использовать объект `window` в браузере. Существует несколько свойств объекта `window`, которые позволяют получить информацию о размерах окна.

1. **window.innerWidth, window.innerHeight**: эти свойства возвращают ширину и высоту окна просмотра в пикселях.

```javascript
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

console.log(`Ширина окна: ${windowWidth}px`);
console.log(`Высота окна: ${windowHeight}px`);
```

2. **window.outerWidth, window.outerHeight**: эти свойства возвращают внешние размеры окна браузера, включая рамки и панель инструментов.

```javascript
const windowOuterWidth = window.outerWidth;
const windowOuterHeight = window.outerHeight;

console.log(`Внешняя ширина окна: ${windowOuterWidth}px`);
console.log(`Внешняя высота окна: ${windowOuterHeight}px`);
```

3. **window.document.documentElement.clientWidth, window.document.documentElement.clientHeight**: эти свойства возвращают ширину и высоту содержимого документа в окне браузера без учета полосы прокрутки.

```javascript
const documentWidth = window.document.documentElement.clientWidth;
const documentHeight = window.document.documentElement.clientHeight;

console.log(`Ширина содержимого: ${documentWidth}px`);
console.log(`Высота содержимого: ${documentHeight}px`);
```

4. **window.screen.availWidth, window.screen.availHeight**: эти свойства возвращают доступное пространство на экране, учитывая панель задач и другие элементы интерфейса.

```javascript
const screenWidth = window.screen.availWidth;
const screenHeight = window.screen.availHeight;

console.log(`Доступная ширина экрана: ${screenWidth}px`);
console.log(`Доступная высота экрана: ${screenHeight}px`);
```

как определить размеры окна браузера в javascript

Ответы

Каталог