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

Ответить
Аватара пользователя
SLITE
Сообщения: 203
Зарегистрирован: 01.01.2010
Для чего это надо? К примеру у нас есть красивый макет сайта, который всю свою красоту проявляет только при разрешении, скажем, 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> 
Не кроссбраузерно
Итак, из двух примеров краткий обзор - что для чего использовать:
  • screen.width. Определяет ширину экрана (монитора).
    screen.height. Определяет высоту экрана (монитора).
    document.body.clientWidth. Определяет ширину браузера.
    document.body.clientHeight. Определяет высоту браузера.
    $(window).width(). Определяет ширину окна браузера, но только при наличии jQuery.
    $(window).height(). Определяет высоту окна браузера, но только при наличии jQuery.
    $(document).width(); Возвращает ширину HTML документа
    $(document).height(); Возвращает высоту HTML документа
Понятно, что если вы используете jQuery, то предпочтительнее 5 вариант, нежели 3, и 6 нежели 4 - они покороче просто. Ну а так - на вкус и на цвет.

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

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

P.S JavaScript. Получение размера страницы

Источник: shublog.ru

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
SLITE писал(а):screen.width. Определяет ширину экрана (монитора).
screen.height. Определяет высоту экрана (монитора).
document.body.clientWidth. Определяет ширину браузера.
document.body.clientHeight. Определяет высоту браузера.
не кроссбраузерно. лучше добавь из viewtopic.php?t=881 дополнительно приведя пример того, как пользоваться возвращаемым массивом.
$(window).width(). Определяет ширину браузера, но только при наличии jQuery.
$(window).height(). Определяет высоту браузера, но только при наличии jQuery.
тоже не верно. исправь согласно http://api.jquery.com/width/ и http://api.jquery.com/height/
This method is also able to find the width of the window and document.
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property.
в общем получается, что процентов 90 статьи надо переписать)

Аватара пользователя
SLITE
Сообщения: 203
Зарегистрирован: 01.01.2010
Distructor писал(а):На сегодня всё! Держимся до выходных и массово едем на шашлыки! (если только вы не больны чем-то, как некоторые - прим.ред.). Удачи!
а это-то зачем дублировать? О.о

упс, не заметил. Все остальное чуть позже до правлю.

Описание элементов вроде уточнил, и подписал что эта функция не кросбраузерна. И добавил ссылку на кроссбраузерный метод с твоей темой. Все, больше ничего не надо править?

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
SLITE писал(а):Все остальное чуть позже до правлю.
похоже не дождемся мы этих правок)

Аватара пользователя
SLITE
Сообщения: 203
Зарегистрирован: 01.01.2010
Distructor писал(а):
SLITE писал(а):Все остальное чуть позже до правлю.
похоже не дождемся мы этих правок)
я уезжал отдыхать просто, а так я больше и не знаю что подправлять т.к в ява скриптах я не шарю.

Ответить