При разработке интерфейсов для сайтов частенько приходиться пользоваться JavaScript. Конечно же это плохо, но в некоторых ситуация просто невозможно реализовать полностью все на CSS .
Самая часта потребность именно у меня возникает в определении ширины или высоты окна браузера для дальнейших манипуляций. Под катом вся информация по этой теме.
Где это может пригодиться?
Я не буду говорить за всех, но мне это пригождается в интеграции с Textpattern`ом всевозможных галерей, слайдеров и т.д., где все написано на чистом JS. Вещи, которые жестко завязаны на JS встречаются редко, но все же встречаются, поэтому и появилась эта заметка.
Определять можно 2 способами: JS или jQuery.
Определение ширины или высоты с помощью чистого JS
Это самый предпочтительный способ, так как движок JavaScript есть практически у каждого современного браузера. Даже мобильные браузеры научились работать с JS.
Конечно же есть вероятность того, что пользователь собственноручно отключить обработку JS в браузере, но, кажется мне, таких «странных людей» не так много, так как практически каждый сайт использует какие-нибудь решения, работающие на JS.
В JS, чтобы определить размеры экрана, нужно использовать функции:
Вот бессмысленный пример использования:
Если Вы используете это для позиционирования каких-то элементов на странице, то лучшим решением будет использовать не размеры экрана, а размеры окна браузера. В JS это делается так:
Соответственно вот бессмысленный пример использования:
Определение размеров браузера с помощью jQuery
Лично я пользуюсь методом, который описан ниже. Этот метод работает только если у Вас на сайте ранее подключена библиотека jQuery. На всех сайтах, которые мне приходится делать эта библиотека является стандартом де`факто.
Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:
И в конце хотелось бы сказать, что если есть возможность обойтись без JS и jQuery вообще или частично, то именно так и нужно поступать.
- naimjonn опубликовал 20 Январь 2014, 12:13 #
Другого нельзя? кроме Alert? например с помощью get запроса отправить куда нибудь и использовать эти данных ?
Вообще то alert без смысленно его видит человек. Мне надо использовать эти данных(height:width) чтоб изменит какието элементи: if ($height>=600) < #code… >else
- itshaman опубликовал 20 Январь 2014, 17:59 #
Я вроде и написал, что пример бессмысленный. Главное же возможность
« document.body.clientWidth » — ширина сайта, родительского элемента body.
« innerWidth » — внутренняя рабочая часть браузера с отображаемым сайтом.
« outerWidth » — размер с учётом полос прокрутки и рамок браузера.
« screen.width » — разрешение экрана по горизонтали.
« screen.availWidth » — доступная область эркана для окон. Не учитвает служебные панели операционной системы, например, панель задач в windows.
К последним 3 переменным иногда добавляют «window», это не играет роли и только удлиняет синтаксис. Например, «window.screen.width».
Пример события для отслеживания изменения размеров окна браузера в реальном времени. Результаты выводятся в консоль браузера.
Высота экрана и окна в JavaScript
Все приведённые переменные работают и с высотой. Во всех случаях просто заменяется в названии «width» на «height».
- document.body.clientHeight;
- innerHeight;
- outerHeight;
- screen.height;
- screen.availHeight.
Наименованя переменных чувствительно к регистру букв, поэтому вызывать их надо именно так как указано.
Высота и ширина на jQuery
Любители популярной библиотеки jQuery могут использовать другой синтаксис. Он может применяться как к браузеру, так и к любому элементу сайта.
- $(‘body’).w >Пример на jQuery:
Для чего нужно определять размер окна браузера, для тех случаев когда нам необходимо сделать например резиновый дизайн или чтобы блок целиком закрывал всю область окна браузера
на jQuery это делается так:
doc_w = $(document).width();
doc_h = $(document).height();
//или
win_w = $(window).width();
win_h = $(window).height();
но если же надо знать размеры каждый раз при ресайзе окна то код будет следующим:
$( window ).resize(function() <$( "body" ).prepend( "
На JavaScript код, определения разрешения экрана
scr_w=screen.width;
scr_h=screen.height;
На JavaScript определяем размер клиентской части окна браузера
client_w=document.body.clientWidth;
client_h=document.body.clientHeight;
Кроссбраузерное получение размеров окна на JS
function getPageSize() <
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) <
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
> else if (document.body.scrollHeight > document.body.offsetHeight) < // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
> else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight) < // Explorer 6 strict mode
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
> else < // Explorer Mac. would also work in Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
>
// for small pages with total height less then height of the viewport
if(yScroll > else <
pageW > >
Поделись с друзьями:
комментария 4 для записи Определяем размер окна браузера (JavaScript, jQuery)
привет, вопрос к админу — а в фейсбуке вас нет?