Для чего это надо? К примеру у нас есть красивый макет сайта, который всю свою красоту проявляет только при разрешении, скажем, 1600 на 1200. К примеру, у него очень большая красивая шапка. Что будет если человек зайдёт на сайт при разрешении 
1024 на 768? Да, только шапка и будет видна. Не хорошо? Пожалуй. Тогда почему бы не сделать такую вещь, что при высоте браузера/экрана шапка бы просто обрезалась, а шло меню и остальной сайт? Во, то что надо.
Собственно я описал один из примеров, с которым столкнулся на практике (см.картинку). Решал проблему просто - через javascript. А может и через jQuery, уже не помню. Опишу оба метода здесь.
Прежде всего следует отличать определение "разрешения экрана" и "размера окна браузера" (поскольку в некоторых статьях были казусы - хаили одни методы, предлагали другие, хотя в одном случае мерили разрешение браузера, в другом - разрешение монитора).
Нужно с самого начала определить что для Вас важнее. В случае того примера с шапкой, я ориентировался на разрешение экрана (монитора): всё таки сайт красив, если окно браузера уменьшено вручную, то пускай при просмотре этого сайта развернут свой браузера на весь экран (нечего им, панимаишь ли - прим.ред.). Но, к примеру, для подстройки развернутого изображения галереи jQuery Lightbox я использовал ширину и высоту браузера.
А после того, как выбрали, пишем код, можно в шапке сайта. Сначала пример, ориентированный на разрешение экрана.
<!--
if (screen.width <= '1024') {
document.write ('<link href="style1024.css" rel="stylesheet" type="text/css">');
}
$(function() {
if(screen.height<1050) {
$('#total').css('background-position', 'center -220px');
}
});
//-->
</script>
3-6 строки - чисто javascript, 7-11 строки - пример на jQuery. Для определения ширины и высоты используются javascript методы screen.width и screen.height. Что делают строки, ясно: первый скрипт прописывает путь к дополнительному файлу CSS, а другой - для блока с идентификатором total проставляет свойство css 'background-position'.
Смотрим второй пример, но который будет ориентироваться на разрешение браузера. Всё тоже самое, изменились методы.
<!--
if (document.body.clientWidth <= '1024') {
document.write ('<link href="style1024.css" rel="stylesheet" type="text/css">');
}
$(function() {
if($(window).height()<1050) {
$('#total').css('background-position', 'center -220px');
}
});
//-->
</script>
Итак, из двух примеров краткий обзор - что для чего использовать:
- screen.width. Определяет ширину экрана (монитора).
- screen.height. Определяет высоту экрана (монитора).
- document.body.clientWidth. Определяет ширину браузера.
- document.body.clientHeight. Определяет высоту браузера.
- $(window).width(). Определяет ширину браузера, но только при наличии jQuery.
- $(window).height(). Определяет высоту браузера, но только при наличии jQuery.
Понятно, что если вы используете jQuery, то предпочтительнее 5 вариант, нежели 3, и 6 нежели 4 - они покороче просто. Ну а так - на вкус и на цвет.
Что касается специфических записей высоты и ширины экраны дл jQuery - то, по правде говоря, я их не знаю. По идее должна быть конструкция типа 5-6 строк, но как-то на практике не сталкивался, сдаётся мне, их нет. Да и не надо, screen.width достаточно короткая конструкция, её хватает.
Да, ещё есть $(document).width() - определяет ширину HTML документа. Использования на практике - как-то сомнительно. Кто знает - буду рад, если поделитесь.
На сегодня всё! Держимся до выходных и массово едем на шашлыки! (если только вы не больны чем-то, как некоторые - прим.ред.). Удачи!
(голосов: 23, средний: 4.78 из 5)Похожие записи:
- "Как скрасить время ожидания пользователя" или "Предварительная загрузка страницы"
- Как сделать кнопку "наверх" как вКонтакте
- Анимированное меню на jQuery в стиле "как флэш"
- Улучшаем AJAX галерею jQuery Lightbox (часть 2) – подгон изображения по ширине и высоте браузера
- Как развернуть flash на весь экран при помощи JavaScript?
Загрузка ...
13/05/2010 at 14:04 Постоянная ссылка Цитировать
А живой примерчик с использванием кода?
13/05/2010 at 15:23 Постоянная ссылка Цитировать
а очень надо? просто код написан, всего несколько строк, можно самому текстовый документ создать, туда вставить строки, прописать нужные правила и всё. дело 1-2 минут. а я пока болею, в кровати, пример делать специальный лениво =)
13/05/2010 at 17:41 Постоянная ссылка Цитировать
Выздоравливай;)
13/05/2010 at 17:43 Постоянная ссылка Цитировать
спасибо!=)
14/05/2010 at 21:24 Постоянная ссылка Цитировать
недавно тож думал над этим вопросом. разве дизайнер не должен держать в голове при создании макета минимальное разрешение и сответственно на него упор делать ?
присоеденяюсь, не болей.)
14/05/2010 at 21:37 Постоянная ссылка Цитировать
дык дизайнер обычно и затачивает макет под минимальное разрешение, при этом показывает как должен выглядеть сайт при большом разрешении. по сути тут такая же тема – он увидел при малых разрешениях выход с обрезанием неба, а при больших – его появлением. Эффект, который можно использовать, почему бы и нет.
Мне кажется куда более актуальным является то, что дизайнер должен быть в курсе всех аяксовских примочек, чтобы предусматривать их в своих макетах. Сайты красивее получаются.
Спасибо! Уже почти поправился =)
28/05/2010 at 10:41 Постоянная ссылка Цитировать
Простите, но метод не работает, если открыть страницу в браузере, окно которого находится во втором мониторе, или окно туда было переведено. То есть определяется разрешение того, который прописан в системе как основной, а не текущего. Единственный случай, когда правильно определяется разрешение – это только при открытии страницы в FF.
Как с этим быть? Вопрос важный.
28/05/2010 at 11:04 Постоянная ссылка Цитировать
Мне думается, что никак. По крайней мере ничего подобного не встречал и даже не слышал.
10/07/2010 at 17:27 Постоянная ссылка Цитировать
Класс, спасибо!
10/07/2010 at 17:39 Постоянная ссылка Цитировать
Пожалуйста!
09/08/2010 at 3:13 Постоянная ссылка Цитировать
А как сделать чтобы при ресайзе браузера значения изменялись на ходу? Все закладки перерыл, не смог найти, помню, что где-то видел.. Хочется чтобы рамка конкретно работала при ресайзе… Спасибо!
09/08/2010 at 9:57 Постоянная ссылка Цитировать
min-width и min-height в помощь =)
11/08/2010 at 18:55 Постоянная ссылка Цитировать
Не получается, там же абсолюты…
11/08/2010 at 19:25 Постоянная ссылка Цитировать
мммм, а без абсолютов никак?=)
а если попробовать весь контент сайта засунуть в див с позишн релатив и уже ему минхайт задать?
11/08/2010 at 20:42 Постоянная ссылка Цитировать
Попробуем. Просто подобное “негорит”
11/08/2010 at 20:44 Постоянная ссылка Цитировать
понятно=)
23/08/2010 at 9:39 Постоянная ссылка Цитировать
Реализовал, кстате, бинд ресайз:
$(window).bind(‘load resize’,function() {
w = $(this).width() – 50;
$(‘.horizontal-border’).css({width: w});
h = $(this).height() – 50;
$(‘.vertical-border’).css({height: h});
});
23/08/2010 at 10:04 Постоянная ссылка Цитировать
хм, хороший вариант!
01/10/2010 at 16:50 Постоянная ссылка Цитировать
Да, то что нужно! Капец, как просто… Имею в виду jQuery. Упростили всё в “полную тапочку”!
01/10/2010 at 20:41 Постоянная ссылка Цитировать
всегда пожалуйста =)
11/11/2010 at 11:41 Постоянная ссылка Цитировать
Если писать общий резайс то что то типо того
$(window).bind("load resize",function() {
var height_body = $(window).height(); //естественно название переменной можно поставить любое )))
var width_body = $(window).width();
// перечень изменений/установок стилей/классов в DOM-ы
});
А так js и jq набирает силы через пяток лет забудем что такое перезагрузка страницы
11/11/2010 at 11:41 Постоянная ссылка Цитировать
Если писать общий резайс то что то типо того
$(window).bind("load resize",function() {
var height_body = $(window).height(); //естественно название переменной можно поставить любое )))
var width_body = $(window).width();
// перечень изменений/установок стилей/классов в DOM-ы
});
А так js и jq набирает силы через пяток лет забудем что такое перезагрузка страницы
11/11/2010 at 13:24 Постоянная ссылка Цитировать
самая главная проблема связана с оптимизацией – вот когда аяксовый контент начнут индексировать, всё, можно забывать о перезагрузках страницы и о тех мизерах, которые отключают жабаскрипт
15/11/2010 at 21:11 Постоянная ссылка Цитировать
Спасибо. На досуге к своим скриптам приклею
15/11/2010 at 21:23 Постоянная ссылка Цитировать
Пожалуйста, пользуйтесь на здоровье =)
25/04/2011 at 2:49 Постоянная ссылка Цитировать
Таки очень годная статья, молодец, Саня!
Джаваскрипт творит чудеса ,если им уметь правильно пользоваться 
25/04/2011 at 4:25 Постоянная ссылка Цитировать
Большое спасибо, стараемся=). А жабаскрипт – это и вправду сила
11/05/2011 at 11:26 Постоянная ссылка Цитировать
Спасибо, очень нужна была такая фишка, нашел тут
11/05/2011 at 12:43 Постоянная ссылка Цитировать
Рад был помочь =)
26/11/2011 at 13:12 Постоянная ссылка Цитировать
Спасибо! Коротко и внятно.
26/11/2011 at 13:19 Постоянная ссылка Цитировать
Пожалуйста =)
29/06/2012 at 19:21 Постоянная ссылка Цитировать
$(window).bind(“load resize”,function() {
var height_body = $(window).height(); //естественно название переменной можно поставить любое )))
var width_body = $(window).width();
});
это определение размеров изменяющегося окна. а как мне оттуда вытащить значения height_body, width_body? просто я в javascript вообще на шарю
29/06/2012 at 21:31 Постоянная ссылка Цитировать
не очень понял в чём проблема. var height_body = $(window).height(); и есть то, что вам надо…
29/06/2012 at 23:37 Постоянная ссылка Цитировать
Мне надо чтобы при изменении размера окна то есть если пользователь свернул или просто изменил размер окна браузера с помощью мыши, блок перемещался на ширина окна браузера разделенная на 2 и отнять от этой величины 111
что то накалякала, но не работает это
$(window).bind(load resize,function() {
var height_body = $(window).height();
var width_body = $(window).width();
width_body=(width_body/2)-111;
width_body= Math.ceil(width_body);
document.write(“”);
})
Помоги пожалуйста срочно надо
07/07/2012 at 9:38 Постоянная ссылка Цитировать
Так у вас в скрипте ничему не задаётся новая ширина. Должно быть что-то типа
$('#my_block').width(width_body);08/04/2013 at 1:01 Постоянная ссылка Цитировать
А как насчет вот этой статьи, можете сказать, тут я правильно использовал код?
wmgid.ru/saytostroenie/nastroyka_korrektnogo_otobrajeniya_temi_dlya_razlichnih_razresheniy_ekranov
Вообще я знаю, что нужно было вместо document.body.clientWidth использовать screen.width для полной корректности исходя из разрешения экрана, но я решил использовать именно ширину окна браузера, так как есть же много людей, которые используют браузер не во всю ширину экрана.
10/04/2013 at 12:47 Постоянная ссылка Цитировать
Ну, если работает – значит правильно. Просто не понятно, что должно происходить по изменению разрешения (в коде не копался, не искал)
10/07/2013 at 17:27 Постоянная ссылка Цитировать
Парни, подскажите пожалуйста ! Если есть сайт на joomla: morgusha.ru
В контенте есть модуль акции с меню! Сейчас он подгружен модулем в контент.
Реально ли на jqwery сделать так, что бы контент просто вставляли ! А этот блок всегда появлялся в одном месте и как бы разделял контент автоматически на 2 части ??? Учитывая ширину и высоты монитора и разрешение !???
Подскажите плиииз !
10/03/2014 at 1:28 Постоянная ссылка Цитировать
Спасибо, материал очень помог, как раз то что искал.
10/03/2014 at 8:28 Постоянная ссылка Цитировать
Не за что =)
14/04/2014 at 10:56 Постоянная ссылка Цитировать
Люди…..а зачем это всё “тырканье” с java? когда есть медиазапросы…
14/04/2014 at 11:16 Постоянная ссылка Цитировать
Сейчас оно может и не актуально, поскольку времена с технологиями идут вперёд. Но в ишаке меньше девятого медиа не поддерживается, так что…
19/01/2015 at 12:51 Постоянная ссылка Цитировать
Проблема:
в Win-XP выражение: var ws=screen.Width; – работало, в Win-7 – переменная бастует. Мне нужно получить графическое разрешение монитора.
Спасибо, тому, кто сможет ответить!
19/08/2015 at 18:13 Постоянная ссылка Цитировать
Сегодня нужно было совет дать по jquery и resize. Ваш сайт (эта статья) подтолкнул(а) к этому решению. Спасибо
19/08/2015 at 21:37 Постоянная ссылка Цитировать
Пожалуйста, Алексей=)