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

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

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

В современные популярные браузеры встроены средства для веб-разработчика. Рассмотрим использование таких средств на примере браузеров Google Chrome и Яндекс браузера, т.к. они практически идентичны.

Средства веб-разработчика в браузере

Чтобы исследовать какой-либо объект открытой страницы сайта, нужно щелкнуть по нему правой кнопкой мыши и найти в контекстном меню пункт «Просмотр кода элемента» (в других браузерах формулировка может отличаться). В нижней части окна откроется панелька средств для веб-разработчика. Автоматически в коде будет выделен тот элемент, по которому вы щелкали. Наведя указатель мыши на выделенный код, на странице сайта будет выделяться и сам объект, который задается кодом, на который вы навели указатель мыши. Если объект автоматически был определен некорректно, то вам нужно навести указатель на соседние строки и уточнить необходимый вам элемент.

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

Информационный раздел

Как выбрать ширину сайта?

При создании сайта одним из первых возникает вопрос: какой делать ширину сайта? Ответ на этот вопрос неоднозначен и будет зависеть от ряда факторов.

Совет 1: Как определить размер сайта

Сайты бывают двух видов: 100% по ширине экрана и фиксированной ширины. Ниже приведен пример сайта с фиксированной шириной.

Теперь о самом важном!

Можно сделать автоматическую ширину сайта (100% по ширине экрана), которая будет автоматически подстраиваться под размеры монитора пользователя, но такой сайт ведет себя неконтролируемо. Мы рекомендуем своим клиентам делать фиксированные значения ширины сайта.

Но решение всегда зависит от Вас.  Примеры сайтов: 100%-ной ширины, фиксированный.

« Вернуться

Ширина сайта удобная для всех

1. SEO Блог
2. Веб-дизайн

2011-10-19

Многие веб мастера и верстальщики задаются вопросами: какая самая оптимальная ширина страниц сайта и что выбрать: резиновую верстку или фиксированную ширину.
И большинство все-таки выбирают наиболее распространенную фиксированную ширину 960px (более распространена в англо-язычном интернете), у нас же чаще всего встречается ширина в 980px.

Моя статистика Google Analytics показывает что только 18% посетителей моего блога имеют разрешение экрана меньшее или равное 1024px, а соответственно 82% — 1280px и более, из чего можно заключить, что возможно уже пора пересмотреть наши привычные стандарты ширины сайтов и делать их хотя бы на порядок шире: для мониторов с разрешением 1280px.

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

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

Самая оптимальная ширина сайта

Как выбрать оптимальную ширину для сайта

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

Изменяемая ширина сайта в зависимости от разрешения экрана лучше фиксированной

Чтобы ваш сайт был еще более дружественным пользователям можно так-же изменять ширину сайта в зависимости от ширины экрана (разрешения) пользователя .
Изменение ширины сайта возможно в случаях если:

1. Сделать сайт резиновым: минимум графики, текст и все размеры указать в процентах.
2. При помощи javascript определять разрешение экрана и подгружать соответствующие ему стили.
3. Используя параметры @media с указанием max-width и min-width и определив отдельные стили для каждого разрешения.

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

Читайте также: сайтыwidthшаблоныстатистика

Комментарии к статье

← Предыдущая статьяСледующая статья →

Причем здесь инвестирование?

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

Как выбрать правильную ширину сайта, или «Телевизор» вместо монитора

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

Что говорит статистика

Мы долго изучали статистические отчеты различных метрик с сайтов партнеров. Смотрели технические характеристики самых популярных мобильных устройств. Ситуация такова, что на рынке среди всех мобильных устройств стали преобладать большие сотовые телефоны, диагональ которых начинается от 5,5″ и заканчивается на 6,2″. Добавим сюда желание Apple выпустить к концу года на рынок продукт с диагональю 6,5″. И наш мозг начинает с трудом переваривать необходимость такой техники. В карман такое уже не положить, да и не в каждой сумке поместится. Однако если посмотреть на способы использования телефона современного смартфона. то становиться понятно зачем. Это странный факт:телефон вроде бы придумали для голосового общения, а используют его всё чаще как устройство для серфинга в сети Интернет. Говоря проще — современная тенденция — это хороший качественный мобильный телефон с отличным экраном, камерой и Интернетом. Это удобный «комбайн», просто надо раз в день заряжать.

Теперь о разрешениях. Самими популярными разрешениями остались 1366*738 и 1920*1080, Это не мобильные разрешения. А вот самым популярным мобильным разрешением стало 360*640. По факту это тройка лидеров.

Полная таблица с информацией по рынку такова:

Вывод

Рынок мобильных устройств не стоит на месте. Сегодня надо искать варианты для вложения средств в этот рынок.