Уголок веб-разработчика

сайт для веб-мастеров и веб-разработчиков


Реклама на сайте
как разместить свою рекламу?



Что нового в блоге?



Разрешения экрана, размеры окна браузера. Справочник (изменения от 27.11.2013)

Автор: Михаил Пестречихин
Источник: http://www.codething.ru/resolutions.php

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

Для этого мы составили очень простую и удобную таблицу:

Разрешение экранаРазмер окна браузераГде встречается
800x600779x431ЭЛТ 15"
1024x7681003x599ЖК 15", ЭЛТ 17"
1280x8001259x631ЖК 15" wide, 17" wide
1280x10241259x855ЖК 17", 19"
1400x10501379x881ЖК 20", 21"
1440x9001419x731ЖК 20" wide
1600x12001579x1031ЭЛТ 19", 21"
1680x10501659x881ЖК 22" wide

Зеленым цветом выделены строки, показывающие оптимальное разрешение, под которые следует проектировать веб-сайт, так как по данным некоторой статистики у большей части пользователей мониторы поддерживают указанные параметры. Менее 10% имеют разрешение меньше указанного. Желательно, чтобы максимальная ширина сайта не превышала 1259 px, иначе некоторые пользователи вашего сайта могут увидить горизонтальный скроллинг, который является очень неудобным для использования. А если вы на своем сайте не хотите видеть и вертикального скроллинга, или просто хотите узнать высоту той части сайта, которую гарантированно увидят сразу при открытии страницы, то она будет в диапазоне 599-631 px.

А как быть с владельцами сотовых телефонов, смартфонов и планшетов? Под какое разрешение разрабатывать сайт для них?

Современные мобильные устройства, кроме очень бюджетных моделей, имеют минимальное разрешение 480x320 px, а чаще 800x480 или более, умеют масштабировать сайты, а также самостоятельно разделять их на блоки, выделять важные текстовые фрагменты. Большинство сайтов корректно отображается на мобильных устройствах и без создания специальной мобильной версии сайта. Если вы все же хотите разработать мобильную версию, то желательно, чтобы она была сверстана в одну колонку (обычные сайты чаще верстают в 2-3 колонки) и не содержала сложных скриптовых и навигационных решений (например, выпадающих меню, мелких управляющих элементов и т.п.).

Определяем разрешение экрана через JavaScript

<script>
	width=screen.width; // ширина
	height=screen.height; // высота
	alert ("Разрешение экрана: "+width+"x"+height);	
</script>

Определяем размер клиентской части окна браузера через JavaScript

<script>
	width=document.body.clientWidth; // ширина
	height=document.body.clientHeight; // высота
	alert ("Разрешение окна клиента: "+width+"x"+height);
</script>

Знаете чем дополнить, пишите нам: studio@pestr.ru







Rambler's Top100
© Студия Михаила Пестречихина, 2008-2017
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.
Хостинг «Джино»