Как изменить размер окна браузера html

Измерения окна, документа и элементов

В решении многих задач может понадобиться определить положение, размер окна браузера, или каких-нибудь определенных элементов документа. В этой записи будут перечислены все способы определения этих значений.

Разрешение экрана

Для определения ширины и высоты экрана пользователя используются свойства width и height объекта window.screen. Эти свойства доступны во всех браузерах.

alert("Разрешение вашего экрана: "+ window.screen.width +"x"+ window.screen.height);

Выполнить этот код

Положение окна браузера

Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.

В итоге мы получили две пары свойств: window.screenY, window.screenX и window.screenTop, window.screenLeft.

Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.

Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.

Напротив, остальные браузеры начинают отсчет от верхней левой точки самого окна, как и ожидается для этих свойств. Стоит отметить, что в Firefox, при развертывании окна на весь экран, значения screenY и screenX могут быть отрицательными.

Странно, но в Opera значения screenY и screenX не undefined, однако я не могу понять, что они значат. При любых перемещениях окна эти значения не меняются и все время отрицательны. Если это не очередной глюк Opera, и я что-то упустил, отпишите, пожалуйста, в комментариях.

Положение окна браузера можно изменить двумя методами:

// Переместить окно в коодинаты x, y:
window.moveTo(<x>, <y>);

// Сместить положение окна на значения dx, dy:
// (относительно текущего положения)
window.moveBy(<dx>, <dy>);

Размеры окна браузера

Под размерами окна браузера подразумеваются как размер всего окна целиком (вместе с хромом и панелями), так и размер видимой части документа (вьюпорт), или другими словами, размер окна браузера без панелей и хрома.

К сожалению, с получением этих значений больше проблем, чем может показаться на первый взгляд.

Для получения размеров окна браузера целиком во всех браузерах, кроме Internet Explorer, вы можете использовать свойства window.outerWidth и window.outerHeight. И, насколько я понимаю, аналогов для Internet Explorer не существует.

С размерами вьюпорта тоже существуют проблемы. Дело в том, что в зависимости от браузера и типа документа значения будут разные, в частности — не всегда ясно, будет ли размер скроллбара учитываться, или нет.

Во всех браузерах, кроме Internet Explorer, вы можете получить размер вьюпорта с помощью свойств window.innerWidth и window.innerHeight. Эти свойства всегда будут включать ширину, или высоту скроллбара, что в некоторых задачах неуместно.

Другим способом определения размеров вьюпорта могут служить свойства clientWidth и clientHeight объекта document.documentElement, или, другими словами, элемента html текущего документа.

var html = document.documentElement;
alert("Размер вьюпорта: "+ html.clientWidth +"х"+ html.clientHeight);

Выполнить этот код

Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.

Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.

И учитывая то, что нет возможности узнать, что является размерами вьюпорта — свойства document.documentElement или document.body (поскольку они оба существуют, но смысл значений может быть разный), то получается, что кросс-браузерное определение размеров вьюпорта этим способом — невозможно, если документ отображается не в режиме следования стандартам.

Размеры окна браузера можно изменить двумя методами:

// Изменить размер окна к ширине равной width и высоте равной height:
window.resizeTo(<width>, <height>);

// Изменить ширину окна на значение dwidth и высоту - на dheight:
// (относительно текущего размера)
window.resizeBy(<dwidth>, <dheight>);

Скролл окна браузера

Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.

Первые два параметра определяются свойствами scrollWidth и scrollHeight объекта document.documentElement. Это, опять же, справедливо только для режима следования стандартам.

Значения ширины и высоты прокрутки окна — количество пикселей, которые могут быть прокручены скроллом. Другими словами — прямоугольник, образованный всеми видимыми элементами документа.

Примечание на счет элементов я сделал не просто так: если какой-нибудь абсолютно позиционированный элемент будет «вылезать» за пределы body, то он «растянет» ширину/высоту скролла, но размеры document.body останутся прежними. Напротив, если размеры документа меньше, чем размеры вьюпорта — то значения scrollWidth и scrollHeight будут равны размерам документа, а не всего окна.

Стоит отметить, что как и в случае с размерами вьюпорта, в режиме «quirks mode» не всегда понятно, свойства какого элемента (documentElement или body) будут иметь нужные нам значения скролла.

Для того, чтобы убедится в том, что в разных браузерах эти свойства имеют разные значения, можете попробовать выполнить тесты, представленные по этой ссылке, в разных браузерах: http://www.quirksmode.org/viewport/experiments/body.html

Для того, чтобы определить на сколько пикселей прокручен документ, нужно обратиться к свойствам scrollTop и scrollLeft объекта document.documentElement, если браузер в режиме следования стандартам, или document.body, если браузер в режиме «quirks mode».

var html = document.documentElement;
alert("Вы уже прокрутили "+ html.scrollTop +"px этой страницы");

Выполнить этот код

В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.

Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):

// Изменить положение прокрутки к определенным значениям top и left:
window.scrollTo(<left>, <top>);

// Сместить положение прокрутки на определенные значения dtop и dleft
// (относительно текущих значений):
window.scrollBy(<dleft>, <dtop>);

// Сместить положение прокрутки на высоту lines строк документа:
window.scrollByLines(lines);

// Сместить положение прокрутки на высоту pages страниц документа
// Под страницей подразумевается высота видимой части документа
window.scrollByPages(pages);

Размеры документа и элементов

Одна из самых часто встречаемых задач — определение размера элемента.

Дело в том, что не всегда достаточно узнать какие значения размеров были установлены через стили элемента и особенно это касается «резиновых» элементов (которые растягиваются в зависимости от размеров их содержания), или элементов с фиксированными размерами, но имеющих внутренние отступы.

Во всех браузерах, независимо от режима, вы можете получить размер элемента с помощью свойств offsetWidth и offsetHeight.

Для демонстрации, небольшой пример:

Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.

Код примера:

element.onclick = function() {
    alert("Размер элемента:" + this.offsetWidth +"x"+ this.offsetHeight);
}

Точно так же можно определить размер всего документа, точнее размеры элемента body:

alert("Размер документа: "+ document.body.offsetWidth +"x"+ document.body.offsetHeight);

Выполнить код примера

Положение элемента на странице

Одна из самых распространенных задач — определение абсолютной позиции элемента относительно левого верхнего угла документа.

Для определения позиции используются следующие свойства элемента:
offsetTop — отступ сверху, измеряется в пикселах относительно родительского элемента.

offsetLeft — отступ слева, измеряется в пикселах относительно родительского элемента.

offsetParent — ближайший родитель, относительно которого делается отсчет. Его значение будет null если текущий элемент невидим (display: none) или это корневой элемент документа.

Поскольку значение считается от ближайшего родителя, то абсолютная позиция относительно верхнего левого угла документа обычно считается в цикле, который завершается тогда, когда значение offsetParent будет равно null.

Обычно, функция по определению абсолютной позиции выглядит следующим образом:

function offsetPosition(element) {
    var offsetLeft = 0, offsetTop = 0;
    do {
        offsetLeft += element.offsetLeft;
        offsetTop  += element.offsetTop;
    } while (element = element.offsetParent);
    return [offsetLeft, offsetTop];
}

Демонстрационный пример:

Кликните для появления сообщения.

Таким способом можно считать позицию как статичных элементов (position: static), так и элементов с абсолютной позицией (position: absolute).

Заключение

Надеюсь, что данная запись поможет вам лучше разобраться в измерениях документа и его элементов. Буду рад услышать замечания или вопросы в комментариях.

Размер окна CSS

Свойство CSS box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.

Без CSS окно-Изменение размера свойства

По умолчанию ширина и высота элемента вычисляется так:

Ширина + отступ + граница = фактическая ширина элемента
Высота + отступ + граница = фактическая высота элемента

Это означает, что при задании ширины/высоты элемента элемент часто отображается больше, чем задано (поскольку граница элемента и отступ добавляются к указанной ширине/высоте элемента).

На следующем рисунке показаны два элемента <div> с одинаковой заданной шириной и высотой:

Этот div меньше (ширина 300px и высота 100px).

Этот div больше (ширина также 300px и высота 100px).

Два элемента <div> выше заканчиваются различными размерами в результате (поскольку div2 имеет заданное заполнение):

Свойство box-sizing решает эту проблему.

>

С помощью окна CSS-изменение размера свойства

Свойство box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.

Если установить box-sizing: border-box; на элементе Padding и граница включены в ширину и высоту:

Both divs are the same size now!

Hooray!

Вот такой же пример, как и выше, с box-sizing: border-box; Добавлено в оба элемента <div>:

Так как результат использования box-sizing: border-box; намного лучше, многие разработчики хотят, чтобы все элементы на своих страницах работали таким образом.

Приведенный ниже код гарантирует, что все элементы имеют размер в этом более интуитивно понятным способом.
Многие браузеры уже используют box-sizing: border-box; для многих элементов формы (но не все, поэтому входные и текстовые области выглядят по-разному по ширине: 100%;).

Применение этого ко всем элементам является безопасным и мудрым:

CSS окно Изменение размера свойства

В этой теме познакомимся с методами глобального объекта window, предназначенными для перемещения окна (moveTo и moveBy), изменения его размера (resizeTo, resizeBy) и выполнения прокрутки страницы (scrollTo и scrollBy).

Перемещение окна

В JavaScript имеются следующие методы объекта window для перемещения окна:

• moveTo – абсолютное перемещение окна в указанные координаты экрана;
• moveBy – перемещения окна на указанное количество пикселей относительно его текущего положения.

Синтаксис метода «window.moveTo»:

window.moveTo(x, y);

// x и у – это координаты точки (соответственно горизонтальная и вертикальная), в которую необходимо переместить левый верхний угол окна браузера

Пример, в котором переместим окно в точку (50, 75):

window.moveTo(50, 75);

Пример, в котором произведём перемещение окна в левый верхний угол экрана:

window.moveTo(0, 0);

Синтаксис метода «window.moveBy»:

window.moveBy(deltaX, deltaY);

// deltaX и deltaY – количество пикселей, на которое следует переместить окно соответственно по горизонтали и вертикали относительно его текущего положения

Например, сдвинем окно на 75px вправо и на 100px вниз:

window.moveBy(75, 100);

В большинстве браузеров перемещение окна доступно только при выполнении следующих условий:

• окно (или вкладка) должно быть создано с помощью window.open;
• в окне не должно находиться более чем одной вкладки.

Пример:

<script>
var myWindow;
function openWindow() {
  myWindow = window.open('', '', 'width=200,height=200');
}
function moveWindowTo() {
  if (myWindow && !myWindow.closed) {
    myWindow.moveTo(300,300);
    myWindow.focus();
  }
}
function moveWindowBy(x,y) {
  if (myWindow && !myWindow.closed) {
    myWindow.moveBy(x,y);
    myWindow.focus();
  }
}
</script>
...
<button onclick="openWindow()">Открыть окно</button>
<button onclick="moveWindowTo()">Переместить левый угол окна в точку (300,300)</button>
<button onclick="moveWindowBy(50,50)">Переместить окно относительно его текущего положения на 50px вправо и на 50px вниз</button>
<button onclick="moveWindowBy(-50,0)">Переместить окно относительно его текущего положения на 50px влево</button>
<button onclick="moveWindowBy(50,0)">Переместить окно относительно его текущего положения на 50px вправо</button>
<button onclick="moveWindowBy(0,-50)">Переместить окно относительно его текущего положения на 50px вверх</button>
<button onclick="moveWindowBy(0,50)">Переместить окно относительно его текущего положения на 50px вниз</button>

Изменение размеров окна

Методы объекта window для изменения размеров окна:

• resizeTo – изменяет ширину (outerWidth) и высоту (outerHeight) окна на указанные значения;
• resizeBy – изменяет ширину (outerWidth) и высоту (outerHeight) окна на указанные величины относительно его текущих размеров.

В JavaScript методы resizeTo и resizeBy выполняют эти действия только посредством изменения положения правого нижнего угла (координаты верхнего левого угла при этом остаются неизменными).

Синтаксис «window.resizeTo»:

// width и height – новая ширина и высота окна в пикселях
window.resizeTo(width, height);

Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:

// получаем 1/2 доступной ширины экрана в пикселях
const width = window.screen.availWidth / 2;
// получаем 1/2 доступной высоты экрана в пикселях
const height = window.screen.availHeight / 2;
// устанавливаем окну ширину и высоту
window.resizeTo(width, height);

Синтаксис «window.resizeBy»:

window.resizeBy(deltaX, deltaY);

// deltaX и deltaY – количество пикселей на которые нужно увеличить размеры окна соответственно по горизонтали и вертикали

Например, уменьшим размеры окна (его ширину и высоту) на 50px:

window.resizeBy(-50, -50);

Пример:

<script>
var myWindow;
function openWindow() {
  myWindow = window.open('', '', 'width=200,height=200');
}
function resizeWindowTo() {
  if (myWindow && !myWindow.closed) {
    myWindow.resizeTo(300,300);
    myWindow.focus();
  }
}
function resizeWindowBy(x,y) {
  if (myWindow && !myWindow.closed) {
    myWindow.resizeBy(x,y);
    myWindow.focus();
  }
}
</script>
...
<button onclick="openWindow()">Открыть окно</button>
<button onclick="resizeWindowTo()">Изменить ширину и высоту окна браузера (300,300)</button>
<button onclick="resizeWindowBy(25,25)">Увеличить ширину и высоту окна браузера на 25px</button>
<button onclick="resizeWindowBy(-25,0)">Уменьшить ширину окна на 25px</button>
<button onclick="resizeWindowBy(25,0)"> Увеличить ширину окна на 25px</button>
<button onclick="resizeWindowBy(0,-25)"> Уменьшить высоту окна на 25px</button>
<button onclick="resizeWindowBy(0,25)"> Увеличить высоту окна на 25px</button>

Прокрутка документа

В JavaScript имеются следующие методы объекта window для прокрутки документа:

• scroll (scrollTo) — прокручивает страницу до указанного места в абсолютном выражении;
• scrollBy — прокручивает документ на определённое количество пикселей относительно текущей позиции.

Синтаксис метода scroll (метод scrollTo выполняет то же самое, что scroll и не отличается по синтаксису):

// 1 вариант
window.scroll(left, top); // left - по оси Х, top - по оси Y

// 2 вариант
window.scroll({
  left: 0, // до какого количества пикселей прокрутить вправо
  top: 0, // до какого количество пикселей прокрутить вниз
  behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно
});

Синтаксис метода scrollBy:

// 1 вариант
window.scrollBy(left, top); // left - по оси Х, top - по оси Y

// 2 вариант
window.scrollBy({
  left: 0, // на какое количество пикселей прокрутить вправо от текущей позиции
  top: 0, // на какое количество пикселей прокрутить вниз от текущей позиции
  behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно
});

Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод scroll или scrollBy с определёнными значениями:

<a id="scrollDown" href="#">вниз мгновенно (до 2000)</a>
<a id="scrollBy" href="#">вниз плавно (на +200)</a>
<a id="scrollUp" href="#">вверх плавно (до 0)</a>

<script>
// получим ссылки по id
const $scrollDown = document.querySelector('#scrollDown');
const $scrollBy = document.querySelector('#scrollBy');
const $scrollUp = document.querySelector('#scrollUp');

// при нажатии на #scrollDown
$scrollDown.onclick = function (e) {
  // отменяем стандартное действие браузера (переход по ссылке)
  e.preventDefault();
  scrollTo(0, 2000);
};
// при нажатии на #scrollBy
$scrollBy.onclick = function (e) {
  // отменяем стандартное действие браузера (переход по ссылке)
  e.preventDefault();
  scrollBy({ top: 200, behavior: 'smooth' });
};
// при нажатии на ##scrollUp
$scrollUp.onclick = function (e) {
  // отменяем стандартное действие браузера (переход по ссылке)
  e.preventDefault();
  scroll({ top: 0, behavior: 'smooth' });
};
</script>