Определение размера окна браузера и монитора

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

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

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

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


3-6 строки - чисто javascript, 7-11 строки - пример на jQuery. Для определения ширины и высоты используются javascript методы screen.width и screen.height. Что делают строки, ясно: первый скрипт прописывает путь к дополнительному файлу CSS, а другой - для блока с идентификатором total проставляет свойство css 'background-position'.

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


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

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 достаточно короткая конструкция, её хватает.
shublog.ru -->

Собственно сам попробовал так сделать, вполне себе ничего.

поправьте если ошибаюсь, но если я в CSS указываю элементам ширину в процентах, то эти проценты считаются относительно окна браузера, так что по сути можно обойтись и без жабаскрипта. Например указать максимальную ширину, чтобы сайт был на весь экран, но параметром max-width задать максимально допутимую ширину, чтобы на больших мониторах не было каки

Так оно то так, но 1-е: для старого эксплорера меньше 7 - криво, 9 - криво.
+ лично мне не нравятся проценты, из-за частой нужды в фиксированном размере определенных блоков

ну на самом деле можно делать контейнеры резиновыми а всякие внутрение блоки фиксироваными при необходимости. Мне сейчас еще предстоит это проходить. Почти закончил шаблон для фапоса, он как раз резиновый. Вот и посмотрим что выйдет