Как определить "разрешение экрана" и "размер окна браузера" на JavaScript и jQuery

13 мая 2010 45 Рубрика: AJAX, JavaScript, jQuery, Важные мелочи

« Предыдущая запись
 		   Следующая запись »
 

Для чего это надо? К примеру у нас есть красивый макет сайта, который всю свою красоту проявляет только при разрешении, скажем, 1600 на 1200. К примеру, у него очень большая красивая шапка. Что будет если человек зайдёт на сайт при разрешении oniona big Как определить "разрешение экрана" и "размер окна браузера" на JavaScript и jQuery1024 на 768? Да, только шапка и будет видна. Не хорошо? Пожалуй. Тогда почему бы не сделать такую вещь, что при высоте браузера/экрана шапка бы просто обрезалась, а шло меню и остальной сайт? Во, то что надо.

Собственно я описал один из примеров, с которым столкнулся на практике (см.картинку). Решал проблему просто - через javascript. А может и через jQuery, уже не помню. Опишу оба метода здесь.

 

Прежде всего следует отличать определение "разрешения экрана" и "размера окна браузера" (поскольку в некоторых статьях были казусы - хаили одни методы, предлагали другие, хотя в одном случае мерили разрешение браузера, в другом - разрешение монитора).

Нужно с самого начала определить что для Вас важнее. В случае того примера с шапкой, я ориентировался на разрешение экрана (монитора): всё таки сайт красив, если окно браузера уменьшено вручную, то пускай при просмотре этого сайта развернут свой браузера на весь экран (нечего им, панимаишь ли - прим.ред.). Но, к примеру, для подстройки развернутого изображения галереи jQuery Lightbox я  использовал ширину и высоту браузера.

А после того, как выбрали, пишем код, можно в шапке сайта. Сначала пример, ориентированный на разрешение экрана.

<script language="JavaScript">
<!--
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'.

Смотрим второй пример, но который будет ориентироваться на разрешение браузера. Всё тоже самое, изменились методы.

<script language="JavaScript">
<!--
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>

 

Итак, из двух примеров краткий обзор - что для чего использовать:

  1. screen.width. Определяет ширину экрана (монитора).
  2. screen.height. Определяет высоту экрана (монитора).
  3. document.body.clientWidth. Определяет ширину браузера.
  4. document.body.clientHeight. Определяет высоту браузера.
  5. $(window).width(). Определяет ширину браузера, но только при наличии jQuery.
  6. $(window).height(). Определяет высоту браузера, но только при наличии jQuery.

Понятно, что если вы используете jQuery, то предпочтительнее 5 вариант, нежели 3, и 6 нежели 4 - они покороче просто. Ну а так - на вкус и на цвет.

Что касается специфических записей высоты и ширины экраны дл jQuery - то, по правде говоря, я их не знаю. По идее должна быть конструкция типа 5-6 строк, но как-то на практике не сталкивался, сдаётся мне, их нет. Да и не надо, screen.width достаточно короткая конструкция, её хватает.

Да, ещё есть $(document).width() - определяет ширину HTML документа. Использования на практике - как-то сомнительно. Кто знает - буду рад, если поделитесь.

 

На сегодня всё! Держимся до выходных и массово едем на шашлыки! (если только вы не больны чем-то, как некоторые - прим.ред.). Удачи!

, ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 23, средний: 4.78 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

  1. Yvelious
    13/05/2010 at 14:04 Постоянная ссылка Цитировать

    А живой примерчик с использванием кода?

  2. Александр Шуйский
    13/05/2010 at 15:23 Постоянная ссылка Цитировать

    а очень надо? просто код написан, всего несколько строк, можно самому текстовый документ создать, туда вставить строки, прописать нужные правила и всё. дело 1-2 минут. а я пока болею, в кровати, пример делать специальный лениво =)

  3. Yvelious
    13/05/2010 at 17:41 Постоянная ссылка Цитировать

    Выздоравливай;)

  4. Александр Шуйский
    13/05/2010 at 17:43 Постоянная ссылка Цитировать

    спасибо!=)

  5. a.t.m.13
    14/05/2010 at 21:24 Постоянная ссылка Цитировать

    недавно тож думал над этим вопросом. разве дизайнер не должен держать в голове при создании макета минимальное разрешение и сответственно на него упор делать ?

    присоеденяюсь, не болей.)

  6. Александр Шуйский
    14/05/2010 at 21:37 Постоянная ссылка Цитировать

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

    Спасибо! Уже почти поправился =)

  7. Сергей
    28/05/2010 at 10:41 Постоянная ссылка Цитировать

    Простите, но метод не работает, если открыть страницу в браузере, окно которого находится во втором мониторе, или окно туда было переведено. То есть определяется разрешение того, который прописан в системе как основной, а не текущего. Единственный случай, когда правильно определяется разрешение – это только при открытии страницы в FF.
    Как с этим быть? Вопрос важный.

  8. Александр Шуйский
    28/05/2010 at 11:04 Постоянная ссылка Цитировать

    Мне думается, что никак. По крайней мере ничего подобного не встречал и даже не слышал.

  9. Виталий
    10/07/2010 at 17:27 Постоянная ссылка Цитировать

    Класс, спасибо!

  10. Александр Шуйский
    10/07/2010 at 17:39 Постоянная ссылка Цитировать

    Пожалуйста!

  11. Виталий
    09/08/2010 at 3:13 Постоянная ссылка Цитировать

    А как сделать чтобы при ресайзе браузера значения изменялись на ходу? Все закладки перерыл, не смог найти, помню, что где-то видел.. Хочется чтобы рамка конкретно работала при ресайзе… http://dropbydrop.org.ua/ Спасибо!

  12. Александр Шуйский
    09/08/2010 at 9:57 Постоянная ссылка Цитировать

    min-width и min-height в помощь =)

  13. Виталий
    11/08/2010 at 18:55 Постоянная ссылка Цитировать

    Не получается, там же абсолюты… :)

  14. Александр Шуйский
    11/08/2010 at 19:25 Постоянная ссылка Цитировать

    мммм, а без абсолютов никак?=)
    а если попробовать весь контент сайта засунуть в див с позишн релатив и уже ему минхайт задать?

  15. Виталий
    11/08/2010 at 20:42 Постоянная ссылка Цитировать

    Попробуем. Просто подобное “негорит” :)

  16. Александр Шуйский
    11/08/2010 at 20:44 Постоянная ссылка Цитировать

    понятно=)

  17. Виталий Капля
    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});
    });

  18. Александр Шуйский
    23/08/2010 at 10:04 Постоянная ссылка Цитировать

    хм, хороший вариант!

  19. margolan
    01/10/2010 at 16:50 Постоянная ссылка Цитировать

    Да, то что нужно! Капец, как просто… Имею в виду jQuery. Упростили всё в “полную тапочку”!

  20. Александр Шуйский
    01/10/2010 at 20:41 Постоянная ссылка Цитировать

    всегда пожалуйста =)

  21. Александр
    11/11/2010 at 11:41 Постоянная ссылка Цитировать

    Если писать общий резайс то что то типо того

    $(window).bind("load resize",function() {

    var height_body = $(window).height(); //естественно название переменной можно поставить любое )))
    var width_body = $(window).width();

    // перечень изменений/установок стилей/классов в DOM-ы

    });

    А так js и jq набирает силы через пяток лет забудем что такое перезагрузка страницы :D

  22. Александр
    11/11/2010 at 11:41 Постоянная ссылка Цитировать

    Если писать общий резайс то что то типо того

    $(window).bind("load resize",function() {

    var height_body = $(window).height(); //естественно название переменной можно поставить любое )))
    var width_body = $(window).width();

    // перечень изменений/установок стилей/классов в DOM-ы

    });

    А так js и jq набирает силы через пяток лет забудем что такое перезагрузка страницы :D

  23. Александр Шуйский
    11/11/2010 at 13:24 Постоянная ссылка Цитировать

    самая главная проблема связана с оптимизацией – вот когда аяксовый контент начнут индексировать, всё, можно забывать о перезагрузках страницы и о тех мизерах, которые отключают жабаскрипт

  24. Скад
    15/11/2010 at 21:11 Постоянная ссылка Цитировать

    Спасибо. На досуге к своим скриптам приклею

  25. Александр Шуйский
    15/11/2010 at 21:23 Постоянная ссылка Цитировать

    Пожалуйста, пользуйтесь на здоровье =)

  26. Виталий Капля
    25/04/2011 at 2:49 Постоянная ссылка Цитировать

    Таки очень годная статья, молодец, Саня! :) Джаваскрипт творит чудеса ,если им уметь правильно пользоваться ;)

  27. Александр Шуйский
    25/04/2011 at 4:25 Постоянная ссылка Цитировать

    Большое спасибо, стараемся=). А жабаскрипт – это и вправду сила 8)

  28. Shurik
    11/05/2011 at 11:26 Постоянная ссылка Цитировать

    Спасибо, очень нужна была такая фишка, нашел тут :)

  29. Александр Шуйский
    11/05/2011 at 12:43 Постоянная ссылка Цитировать

    Рад был помочь =)

  30. Денис
    26/11/2011 at 13:12 Постоянная ссылка Цитировать

    Спасибо! Коротко и внятно.

  31. Александр Шуйский
    26/11/2011 at 13:19 Постоянная ссылка Цитировать

    Пожалуйста =)

  32. Алина
    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 вообще на шарю

  33. Александр Шуйский
    29/06/2012 at 21:31 Постоянная ссылка Цитировать

    не очень понял в чём проблема. var height_body = $(window).height(); и есть то, что вам надо…

  34. Алина
    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(“”);
    })

    Помоги пожалуйста срочно надо

  35. Александр Шуйский
    07/07/2012 at 9:38 Постоянная ссылка Цитировать

    Так у вас в скрипте ничему не задаётся новая ширина. Должно быть что-то типа
    $('#my_block').width(width_body);

  36. Abdujamol
    08/04/2013 at 1:01 Постоянная ссылка Цитировать

    А как насчет вот этой статьи, можете сказать, тут я правильно использовал код?
    wmgid.ru/saytostroenie/nastroyka_korrektnogo_otobrajeniya_temi_dlya_razlichnih_razresheniy_ekranov
    Вообще я знаю, что нужно было вместо document.body.clientWidth использовать screen.width для полной корректности исходя из разрешения экрана, но я решил использовать именно ширину окна браузера, так как есть же много людей, которые используют браузер не во всю ширину экрана.

  37. Александр Шуйский
    10/04/2013 at 12:47 Постоянная ссылка Цитировать

    Ну, если работает – значит правильно. Просто не понятно, что должно происходить по изменению разрешения (в коде не копался, не искал)

  38. олег
    10/07/2013 at 17:27 Постоянная ссылка Цитировать

    Парни, подскажите пожалуйста ! Если есть сайт на joomla: morgusha.ru
    В контенте есть модуль акции с меню! Сейчас он подгружен модулем в контент.
    Реально ли на jqwery сделать так, что бы контент просто вставляли ! А этот блок всегда появлялся в одном месте и как бы разделял контент автоматически на 2 части ??? Учитывая ширину и высоты монитора и разрешение !???
    Подскажите плиииз !

  39. Константин
    10/03/2014 at 1:28 Постоянная ссылка Цитировать

    Спасибо, материал очень помог, как раз то что искал. :)

  40. Александр Шуйский
    10/03/2014 at 8:28 Постоянная ссылка Цитировать

    Не за что =)

  41. Алексей
    14/04/2014 at 10:56 Постоянная ссылка Цитировать

    Люди…..а зачем это всё “тырканье” с java? когда есть медиазапросы…

  42. Александр Шуйский
    14/04/2014 at 11:16 Постоянная ссылка Цитировать

    Сейчас оно может и не актуально, поскольку времена с технологиями идут вперёд. Но в ишаке меньше девятого медиа не поддерживается, так что…

  43. Виктор Васильевич
    19/01/2015 at 12:51 Постоянная ссылка Цитировать

    Проблема:
    в Win-XP выражение: var ws=screen.Width; – работало, в Win-7 – переменная бастует. Мне нужно получить графическое разрешение монитора.
    Спасибо, тому, кто сможет ответить!

  44. Алексей
    19/08/2015 at 18:13 Постоянная ссылка Цитировать

    Сегодня нужно было совет дать по jquery и resize. Ваш сайт (эта статья) подтолкнул(а) к этому решению. Спасибо

  45. Александр Шуйский
    19/08/2015 at 21:37 Постоянная ссылка Цитировать

    Пожалуйста, Алексей=)