Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Ответить
1

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

skad0

  • Атом-мозг
  • Юзер
  • 841
  • Репутация:10 
  • Предупреждения: 0 
  • Регистрация:
    2 Окт 2010
#1
Множество веб программистов сталкиваются с проблемой красивого отображения сайта на разных мониторах, есть вариант - сделать сайт "резиновым" с процентными значениями, но есть вариант ещё проще и интересней, хоть и длинней.

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

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

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

Code:
<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'.

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

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

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

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#2
поправьте если ошибаюсь, но если я в CSS указываю элементам ширину в процентах, то эти проценты считаются относительно окна браузера, так что по сути можно обойтись и без жабаскрипта. Например указать максимальную ширину, чтобы сайт был на весь экран, но параметром max-width задать максимально допутимую ширину, чтобы на больших мониторах не было каки:)

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

skad0

  • Атом-мозг
  • Юзер
  • 841
  • Репутация:10 
  • Предупреждения: 0 
  • Регистрация:
    2 Окт 2010
#3
Цитата
max-width
Так оно то так, но 1-е: для старого эксплорера меньше 7 - криво, 9 - криво.
+ лично мне не нравятся проценты, из-за частой нужды в фиксированном размере определенных блоков

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#4
ну на самом деле можно делать контейнеры резиновыми а всякие внутрение блоки фиксироваными при необходимости. Мне сейчас еще предстоит это проходить. Почти закончил шаблон для фапоса, он как раз резиновый. Вот и посмотрим что выйдет:)

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)
1
Сейчас online: 55. Зарегистрированных: 2. Гостей: 53.