как узнать размер элемента на сайте
Как узнать размер элемента страницы сайта в браузере?
Вы когда-нибудь пытались узнать размеры какого-нибудь элемента страницы сайта в браузере (размеры баннера, ширину или высоту блока) и т.д.? Если вам приходится решать подобные задачи, то эта публикация для вас.
Согласитесь, делать измерения объекта на экране компьютера, довольно неудобно. Конечно, есть специальный софт, например, экранные линейки, которые позволяют делать измерения объектов. Но сегодня речь пойдет именно об определении размеров элементов любого сайта, который мы можем открыть в браузере и сделать необходимые измерения средствами самого браузера.
В современные популярные браузеры встроены средства для веб-разработчика. Рассмотрим использование таких средств на примере браузеров Google Chrome и Яндекс браузера, т.к. они практически идентичны.
Средства веб-разработчика в браузере
Чтобы исследовать какой-либо объект открытой страницы сайта, нужно щелкнуть по нему правой кнопкой мыши и найти в контекстном меню пункт «Просмотр кода элемента» (в других браузерах формулировка может отличаться). В нижней части окна откроется панелька средств для веб-разработчика. Автоматически в коде будет выделен тот элемент, по которому вы щелкали. Наведя указатель мыши на выделенный код, на странице сайта будет выделяться и сам объект, который задается кодом, на который вы навели указатель мыши. Если объект автоматически был определен некорректно, то вам нужно навести указатель на соседние строки и уточнить необходимый вам элемент.
Под выделенными на экране элементами, найденными таким образом, будут отображаться их размеры. В общем описывать все немного запутанно получилось. Лучше смотрите видео-инструкцию. Все очень просто 😉
Как получить размеры экрана, окна и веб-страницы в JavaScript?
Доброго времени суток, друзья!
Представляю Вашему вниманию перевод небольшой заметки «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. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Наконец, размер веб-страницы — это размер контента.
Как узнать размер элемента на сайте
Многие веб мастера и верстальщики задаются вопросами: какая самая оптимальная ширина страниц сайта и что выбрать: резиновую верстку или фиксированную ширину.
И большинство все-таки выбирают наиболее распространенную фиксированную ширину 960px (более распространена в англо-язычном интернете), у нас же чаще всего встречается ширина в 980px.
Моя статистика Google Analytics показывает что только 18% посетителей моего блога имеют разрешение экрана меньшее или равное 1024px, а соответственно 82% — 1280px и более, из чего можно заключить, что возможно уже пора пересмотреть наши привычные стандарты ширины сайтов и делать их хотя бы на порядок шире: для мониторов с разрешением 1280px.
Мне то наверно действительно пора сделать шаблон пошире, ну или хотя бы добавить еще один лист стилей для широких мониторов.
В идеале для того чтобы сайт был удобен любому пользователю вне зависимости от величины разрешения его экрана, его ширина а соответственно высота и размер элементов на странице должен изменяться в зависимости от разрешения экрана и размера окна браузера.
Под эти требования подходят сайты с растягивающимися «резиновыми» макетами, но как мы уже выяснили в предыдущей статье, что резиновая верстка хуже фиксированной ширины шаблона вследствие сложности самой верстки и сложностях в использовании графического дизайна.
Поэтому фиксированная ширина страниц самая удобная — и с моей точки зрения все-таки самый лучший и оптимальный выбор для сайтов.
Самая оптимальная ширина сайта
Как выбрать оптимальную ширину для сайта
Чтобы выбрать оптимальную ширину для вашего сайта можно воспользоваться статистикой посещений пользователей и установить фиксированную ширину под самое распространенное разрешение.
Кроме этого, для пользователей мобильных телефонов и для пользователей с другими разрешениями можно подключить отдельные стили для изменения ширины сайта.
Изменяемая ширина сайта в зависимости от разрешения экрана лучше фиксированной
Главное не забудьте при изменении ширины при помощи стилей должны изменяться и размеры графических элементов страницы, поэтому под каждое разрешение вам придется создавать отдельную копию дизайна.
Читайте также: сайтыwidthшаблоныстатистика
Комментарии к статье
← Предыдущая статьяСледующая статья →
Причем здесь инвестирование?
Сегодня на рынке инвестирования есть огромное количество продуктов из различных сфер. Нам показалось, что стоит обратить ваше внимание на быстро растущий рынок мобильных устройств.
Как выбрать правильную ширину сайта, или «Телевизор» вместо монитора
Нет, обзоров здесь не будет, мы хотим рассмотреть этот рынок через призму характеристик экрана. Мобильный телефон, планшет, ноутбук уже прочно закрепились в нашей жизни, фактически мы проводим с ними больше времени чем с живыми людьми вокруг нас.
Что говорит статистика
Мы долго изучали статистические отчеты различных метрик с сайтов партнеров. Смотрели технические характеристики самых популярных мобильных устройств. Ситуация такова, что на рынке среди всех мобильных устройств стали преобладать большие сотовые телефоны, диагональ которых начинается от 5,5″ и заканчивается на 6,2″. Добавим сюда желание Apple выпустить к концу года на рынок продукт с диагональю 6,5″. И наш мозг начинает с трудом переваривать необходимость такой техники. В карман такое уже не положить, да и не в каждой сумке поместится. Однако если посмотреть на способы использования телефона современного смартфона. то становиться понятно зачем. Это странный факт:телефон вроде бы придумали для голосового общения, а используют его всё чаще как устройство для серфинга в сети Интернет. Говоря проще — современная тенденция — это хороший качественный мобильный телефон с отличным экраном, камерой и Интернетом. Это удобный «комбайн», просто надо раз в день заряжать.
Теперь о разрешениях. Самими популярными разрешениями остались 1366*738 и 1920*1080, Это не мобильные разрешения. А вот самым популярным мобильным разрешением стало 360*640. По факту это тройка лидеров.
Полная таблица с информацией по рынку такова:
| Разрешение | Пользователей | Динамика |
| 1366×768 | 21.15 % | -1.46% |
| 360×640 | 18.28 % | +2.31% |
| 1920×1080 | 12.29 % | -0.85% |
| 1280×1024 | 6.94 % | -0.40% |
| 1600×900 | 4.57 % | -0.23% |
| 375×667 | 4.36 % | +0.48% |
| 1024×768 | 4.08 % | -0.26% |
| 320×568 | 3.83 % | +0.10% |
| 1440×900 | 3.16 % | -0.19% |
| 1280×800 | 3.08 % | -0.02% |
| 1680×1050 | 2.03 % | -0.25% |
| 768×1024 | 2.00 % | +0.07% |
| 1536×864 | 1.93 % | +0.22% |
| 320×534 | 1.84 % | +0.05% |
| 320×570 | 1.62 % | +0.09% |
| 1280×720 | 1.42 % | +0.04% |
| 1360×768 | 1.05 % | -0.22% |
Вывод
Рынок мобильных устройств не стоит на месте. Сегодня надо искать варианты для вложения средств в этот рынок.
Как узнать размер баннера в пикселях на чужом сайте?
Какие бывают форматы баннеров?
Сначала можно выбрать, что приготовить: смузи или сок?
Затем определиться с фруктом, овощем или ягодой, из которой мы будем готовить напиток. 
В конце вы получите природное пойло, в соответствии с вашими кликами. Разумеется, только на картинке. А вот, если перейдете по ссылке в конце такой игры, то сможете приобрести соковыжималку и уже пить реальный сок или смузи у себя дома.
Кроме этих видов есть еще Pop-up—баннеры, которые всплывают в новом окне и Float-баннеры, закрывающие часть страницы. Также можно разделить все форматы баннеров по размерам.
Какие бывают размеры баннеров?
Сразу скажу, что не существует официальной классификации и терминологии размеров баннеров ни в пикселях, ни в сантиметрах, ни в любых других единицах измерения. Ежегодно создаются новые виды и формы баннеров. В качестве ориентира всегда используются стандарты рекламной организации Internet Advertising Bureau. Самые популярные приведены в следующей таблице.
А здесь я прикреплю для вас шпаргалку с самыми используемыми форматами баннеров в рунете.
Как узнать размер баннера в пикселях на чужом сайте?
Вы, например, серфили и на каком-нибудь ресурсе вдруг заметили интересный баннер. Вам понравилось его расположение, то как он органично вписывается на странице, и поэтому решили узнать его размер. В таком случае необходимо выполнить следующий алгоритм:
Почему разные форматы баннеров все еще востребованны?
Ну во-первых, потому что баннеры являются своего рода аналогом внешней рекламы в виртуальном мире. Они более информативны, дешевле и содержат прямую гиперссылку на сайт рекламодателя. Да и как я уже говорил, Adblock блокирует далеко не все рекламные постеры. На самом деле баннеры не так уж и бесят посетителей сайта при грамотном подходе к их использованию. Один российский спортивный портал каждый раз выводил вот такую картинку для посетителей с блокировщиками рекламы. И плюс ко всему делал страницу черно-белой. Продукт, выпускаемый эти сервисом, был настолько качественным, что около 90% пользователей действительно отключали расширения и продолжали просмотр ресурса.
Чуть позже сайт создал приложение, в котором при желании можно отключить рекламу за платную подписку. Ради хорошего чтива про любимую команду можно потерпеть любые форматы рекламы.
Как узнать размер элемента сайта в пикселях
Как узнать размер элемента сайта в пикселях
Здравствуйте, друзья! В данной статье дается ответ на вопрос о том, как узнать размер элемента сайта в пикселях. Зачем это может быть нужно? Например, Вы хотите поместить рекламный баннер в сайдбаре своего сайта.
Для того, чтобы внешний вид сайдбара выглядел привлекательно, нужно выбрать размер баннера в соответствии с размерами других элементов, расположенных в сайдбаре. Обычно достаточно узнать необходимую ширину баннера.
Пусть необходимо поместить баннер с рекламой в место блога, указанное красной стрелкой на рис. 1. Ширина баннера должна быть равной ширине элемента, показанного синей стрелкой.
Для измерения расстояний в браузере Google Chrome имеется расширение MeasureIt — «Линейка». Установить его можно по следующей ссылке, скопировав ее и поместив в строку браузера.
После установки расширения в правом верхнем углу браузера появляется соответствующий значок (рис. 2)
Чтобы измерить расстояние между любыми двумя точками на открытой странице сайта, нажимаем на этот значок. Изображение слегка помутнеет, а курсор примет форму перекрестья. Подводим курсор к начальной точке и нажимаем на левую кнопку мыши. Не отпуская кнопку, подводим курсор к конечной точке и после этого отпускаем. При этом выделяется прямоугольная область, размеры которой высвечиваются в небольшом прямоугольнике рядом с ней (рис. 3)
перемещаем виджет в нужное место сайдбара, нажимаем кнопку «Сохранить», переходим на сайт и обновляем изображение. Полученный результат приведен на рис. 5.
Существует другой способ получения информации (не только о размерах) об элементах сайта, основанный на использовании панели для веб разработчиков. Как пользоваться этой панелью показано на видео ниже.
Надеюсь материал статьи будет Вам полезен! Удачи!