Как узнать размер элемента страницы сайта в браузере

Обновлено: 06.07.2024

В окне Firefox Информация о странице приведена информация о странице, на которой вы находитесь, а также в нём можно изменять разрешения для этого веб-сайта. Чтобы открыть окно Информация о странице, используйте один из следующих методов:

Если Панель меню включена, На панели меню щёлкните Инструменты и выберите в выпадающем меню Информация о странице .

Щёлкните правой кнопкой мыши Удерживая клавишу Control , щёлкните мышью в пустой области веб-страницы и выберите Информация о странице из контекстного меню.

Используйте сочетание клавиш Ctrl + I command + I .

Вы также можете открыть окно Информация о странице, выполнив следующие шаги:

Открывшееся окно Информация о странице выполнено в виде набора панелей. Каждая панель описана ниже.

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

Адрес: URL указанного элемента.
Тип: Тип файла указанного элемента.
Размер: Размер в килобайтах (и байтах) указанного элемента.
Размеры: Размер элемента на экране в пикселях.
Связанный текст: Для изображений это "альтернативный" текст, который отображается, если изображение не загружено.

Вы можете сохранить на свой жесткий диск любой элемент, щёлкнув по кнопке Сохранить как… .

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

Доступ к устройствам виртуальной реальности

Знать ваше местоположение

Определяет, разрешено ли Firefox сообщать указанному домену, где вы находитесь, используя функцию Геолокации.

Автоматическое воспроизведение

Определяет, может ли указанный домен автоматически воспроизводить звук или видео. Для получения дополнительной информации, прочитайте статью Разрешение и блокировка автоматического проигрывания медиа в Firefox.

Установка расширений

Определяет, может ли указанный домен запускать диалоговое окно установки расширения или темы. Разрешения на установку для веб-сайтов могут быть добавлены или удалены на панели Приватность и Защита Настроек Firefox Настроек Firefox , ниже раздела Разрешения.

Открывать всплывающие окна

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

Переопределить сочетания клавиш

Отправлять уведомления

Определяет, разрешено ли указанному домену отправлять Push-уведомления.

Устанавливать куки

Определяет, может ли указанный домен устанавливать куки. Для получения инструкций о том, как добавлять и удалять разрешения на установку куков для сайтов, прочитайте статьи Веб-сайты сообщают что куки заблокированы - Как их разблокировать и Как не давать веб-сайтам сохранять куки и данные сайтов в Firefox.

Делиться экраном

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

Хранить данные в постоянном хранилище

Определяет, разрешено ли указанному домену хранить данные на вашем компьютере для последующего использования. Firefox сохраняет данные веб-сайтов в постоянном хранилище, до тех пор пока вы их не удалите. Для получения дополнительной информации, прочитайте статью API хранилища - некоторые веб-сайты хотят добавлять файлы на мой компьютер.

Перейти на эту вкладку

Определяет, разрешено ли указанному домену изменять фокус на его собственную вкладку. Вы можете установить этот параметр как Всегда спрашивать или Разрешить.

Использовать камеру

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

Использовать микрофон

Определяет, разрешено ли указанному домену использовать ваш микрофон. Это применимо к сайтам, у которых есть возможность записывать аудио, например, сайты голосовых конференций. Вы можете выбрать между вариантами Всегда спрашивать, Разрешить или Блокировать.

Подлинность веб-сайта

Владелец: Отображает владельца сайта, если подлинность страницы может быть подтверждена.
Подтверждено: Отображает агентство, выдавшее сертификат безопасности, который использует сайт, если таковой имеется. Чтобы увидеть сертификат веб-сайта, щёлкните по кнопке Просмотреть сертификат .

Приватность и История

Посещал ли я этот веб-сайт до сегодняшнего дня?: Отображает, посещали ли вы сайт до сегодняшнего дня, и если да, то сколько раз.

Хранит ли этот веб-сайт информацию на моём компьютере?: Показывает, хранит ли сайт куки или другие данные сайта. Щёлкните по кнопке Удалить куки и данные сайта , чтобы просмотреть или удалить сохранённые данные в случае их наличия.
Сохранял ли я для этого веб-сайта какие-либо пароли?: Отображает, сохраняли ли вы регистрационную информацию для этого сайта. Щёлкните по кнопке Просмотреть сохранённые пароли для просмотра паролей, которые вы сохранили для этого сайта.

Технические детали

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

Эти прекрасные люди помогли написать эту статью:

Станьте волонтёром

Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.

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

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

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

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

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

В итоге мы получили две пары свойств: 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, и я что-то упустил, отпишите, пожалуйста, в комментариях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Ожидал увидеть еще способ кросс-браузерного получения координат мыши

Взяв реализацию из jQuery и немного переделав её, получил:

Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить

Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!

Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.

Афтор зачод! Наитолковые статьи в рунете по ЯС! Сразу видно берется за дело с головой. Пишы исчо! Где я только не рылся за этим материалом а оно вот он чо! всё тут и на блюдечге!!
// З.Ы. Илья - ф основную книгу эту статью ИМХО этот каждому пригодится, а в этих блогах фиг нашол, ещё повезло что наткнулся =)

автор пишы исчо это точно:) спс за размеры окна браузера

На основе некоторых идей этой статьи создан основной материал сайта.

Спасибо за статью, Андрей!

Спасибо, всегда путаю, что x (икс) это "left" в переносе на слова.

Классная статья, спасибо!

Но подскажите, как эти полезные свойства применить собственно к элементам страницы: к примеру чтоб таблица, структурирующая GUI, масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не применимы свойства :

Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо

Для body везде получились различные значения высоты.

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

А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:

в IE7 не сработал, выдал 0

Я понял. Для IE надо math.max получать. Спасибо

Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари

Ой, чуть не забыл пояснить.
функция возвращает:
ww - window width
wh - window height
dw - document width
dh - document height
wsl - window scroll left
wst - window scroll top

Снова я, уж простите, доработанная функция:

Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.

Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.

Спасибо, но для тех, кто не подключал jQuery эту часть кода

надо заменить на

Спасибо. Долго искал эту информацию и нашел.

А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
- верстаю в xhtml со следующим шаблоном пустого дока:

- если страница верстается php, то конечно же в нем шлется заголовок

- если что-то пошло не так, значит накосячил в html-коде и он уже в квирк-моде, открываю в Опере, жму "Соблюдены ли web-стандарты" и добиваюсь успешной проверки на W3C-валидаторе. По-ходу, практически не встречаю в инете страниц, проходящих валидацию. Эта страничка например тоже не проходит - куча досадных ошибок типа не указан тип скрипта, блок стилей вставлен там где нельзя, спаны закрываются, но не открывались перед этим, id дублирующиеся и т.д. Очень распространен подход, когда в js пишут что-то типа

(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?

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

А когда половина страниц валидируются, другие в квирке рисуются, то конечно начинается каша, геморой, бессонные ночи и т.д.

Итак, начинать следует со стандартизации своих проектов и исправления в них ошибок перед каждым релизом (мы ж не роботы, конечно забываем временами и коменты вставлять и < br > вместо < br /> на скорую руку пишем) - отправка страницы прямо из браузера на W3C всегда под рукой.

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

А так, провел небольшой тест на Опера 10.60 (пачка пердыдущих версий скорей всего то же выдаст), IE8 и FF 3.6.6. Создал корректную страницу с длинной таблицей на 100 строк, каждая строка имеет паддинг, прописанный в CSS, что в IE и в Фоксе приводит к увеличению высоты html (т.е. html становится длиннее body), аналогично и при div-верстке, т.е. лично таблицы тут ни при чем. Такая же фича наблюдается и в Опере ИНОГДА. Возможно в квирке - не проследил. В тестовом примере в Опере html не удлинился и не испортил страницу лишним белым куском на 700+ точек.

Результаты таковы (html - это document.documentElement):

1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.

2. Во всех браузерах body.scrollTop равен 0 не зависимо от того, где мы находимся - вверху или внизу. В принципе, логично, у нас же html скролится, а не body.

2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.

3. Исходя из вышесказанного и увиденного полная высота именно body записана только в IE, в котором мы можем видеть, что body - 2471 px, а html - 3178 px; в Опере мы можем понадеяться, что лишней простыни после body не добавлено и следовательно его высота равна высоте html, а вот в Фоксе мы понятия не имеем, что body короче html и вообще короче ли или одинаковы.

Если нужно знать высоту именно body, то в ряде случаев можно попробовать запретить скрол html-у и выдать скролл body. Но в ряде случаев такой финт ушами не получится (если получится вообще, т.к. не пробовал еще). Например если у нас дизайн на 100% высоты видимого окна, тогда чтобы размер документа был на всю видимую высоту даже если контент коротковат для этого, нам придется в css выставить высоту 100% для html, body и контейнера, который содержит контент и например футер или бекграунд внизу. А в таком случае когда контента будет больше чем на высоту виевпорта указанные нами 100% для html будут делать его всегда не меньше чем body в нем,который тоже не меньше чем контент в нем. Т.е. фишка с коротким html и скролящимся в нем body - не возможна.

Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения.

Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).

Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.

Говорю Спасибо за сайт.
Мне очень помог.

Спасибо за статью! Но нигде не могу найти, как можно (и можно ли вообще) определить расстояние нижней границы элемента до нижней границы окна браузера. Может, кто-нибудь подскажет. Заранее спасибо!

Всем привет, Великолепная фраза

Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит

"Буду раЗ услышать замечания . "

помог scrollHeight снять с дива высоту динамически

var nextdata = 10; var controlXP = null;

Modalheightobj = (Winmedia.WindowData.scrollHeight - 450);

if ((EvenTop >= Modalheightobj) && (EvenTop > controlXP) && (controlXP < Modalheightobj))

case '415' : case '425' :

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

вот такой вариант покачто получился, но приходится обновлять страницу =( что не есть хорошо.

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

подскажите как можно проверить, до конца ли прокручена страница скроллом?

есть вопрос к хорошей статье, у меня не работает функция offsetHeight в chrome, показывает 0, если принудительно не определен размер diva, что делать? заранее благодарен
пс: хром с 15ой версии, привиос версии не проверял

я конечно догадывался, что проще пролезть в форточку, чем пройти через дверь, но все же вот самый простой способ узнать высоту вьюпорта в любом браузере!=)

абсолютно аналогично для ширины. что проще чем убрать скролы, обрубив все лишнее, что вылезает за окно браузера; измерить высоту и вернуть обратно?=)

коечто подправил. для динамической работы)

Вопрос исключительно для профессионалов. Я хочу узнать реальную ширину текста. Есть стиль для некоего div'а:

Соответственно забиваю текст в нужный div и использую свойство scrollWidth. Получаю реальную ширину, однако это свойство не дает дробной части, которая есть в firefox. отсюда вопрос, как найти эту потерянную дробную часть.

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

Не паримся, определяем размер страницы так используя jquery - $(document).height() - коротко, правильно, кросбраузерно.

Огромное спасибо!
Отличная и полезная статья.
Также - спасибо комментаторам, многие дельные.

не лучше ли сейчас вместо offsetWidth и offsetHeight. всегда использовать getBoundingClientRect?

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

1. Экран

1.1. Размер экрана

Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

Получить информацию о размере экрана можно с помощью свойства screen объекта window :

1.2. Доступный размер экрана

Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Для получения доступного размера экрана снова обращаемся к window.screen :

2. Окно

2.1. Размер внешнего окна (или внешний размер окна)

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

Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

2.2. Внутренний размер окна (или размер внутреннего окна)

Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).

Объект window предоставляет свойства innerWidth и innerHeight :

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

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

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

Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

4. Заключение

Надеюсь, теперь Вы понимаете, как получать различные размеры.

Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

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

Сначала можно выбрать, что приготовить: смузи или сок?

Затем определиться с фруктом, овощем или ягодой, из которой мы будем готовить напиток.
В конце вы получите природное пойло, в соответствии с вашими кликами. Разумеется, только на картинке. А вот, если перейдете по ссылке в конце такой игры, то сможете приобрести соковыжималку и уже пить реальный сок или смузи у себя дома.

Текстовые — просто текст без картинок и анимаций.

Кроме этих видов есть еще Pop-up—баннеры, которые всплывают в новом окне и Float-баннеры, закрывающие часть страницы. Также можно разделить все форматы баннеров по размерам.

Какие бывают размеры баннеров?

Сразу скажу, что не существует официальной классификации и терминологии размеров баннеров ни в пикселях, ни в сантиметрах, ни в любых других единицах измерения. Ежегодно создаются новые виды и формы баннеров. В качестве ориентира всегда используются стандарты рекламной организации Internet Advertising Bureau. Самые популярные приведены в следующей таблице.

А здесь я прикреплю для вас шпаргалку с самыми используемыми форматами баннеров в рунете.

Как узнать размер баннера в пикселях на чужом сайте?

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

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

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

Почему разные форматы баннеров все еще востребованны?

Ну во-первых, потому что баннеры являются своего рода аналогом внешней рекламы в виртуальном мире. Они более информативны, дешевле и содержат прямую гиперссылку на сайт рекламодателя. Да и как я уже говорил, Adblock блокирует далеко не все рекламные постеры. На самом деле баннеры не так уж и бесят посетителей сайта при грамотном подходе к их использованию. Один российский спортивный портал каждый раз выводил вот такую картинку для посетителей с блокировщиками рекламы. И плюс ко всему делал страницу черно-белой. Продукт, выпускаемый эти сервисом, был настолько качественным, что около 90% пользователей действительно отключали расширения и продолжали просмотр ресурса.
Чуть позже сайт создал приложение, в котором при желании можно отключить рекламу за платную подписку. Ради хорошего чтива про любимую команду можно потерпеть любые форматы рекламы.

Читайте также: