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

Автор:
Источник: /resolutions.php

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

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

Разрешение экрана	Размер окна браузера	Где встречается
800x600	779x431	ЭЛТ 15"
1024x768	1003x599	ЖК 15", ЭЛТ 17"
1280x800	1259x631	ЖК 15" wide, 17" wide
1280x1024	1259x855	ЖК 17", 19"
1400x1050	1379x881	ЖК 20", 21"
1440x900	1419x731	ЖК 20" wide
1600x1200	1579x1031	ЭЛТ 19", 21"
1680x1050	1659x881	ЖК 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>

Знаете чем дополнить, пишите нам: