Javascript ширина окна браузера

Javascript ширина окна браузера

При разработке интерфейсов для сайтов частенько приходиться пользоваться JavaScript. Конечно же это плохо, но в некоторых ситуация просто невозможно реализовать полностью все на CSS .

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

Где это может пригодиться?

Я не буду говорить за всех, но мне это пригождается в интеграции с Textpattern`ом всевозможных галерей, слайдеров и т.д., где все написано на чистом JS. Вещи, которые жестко завязаны на JS встречаются редко, но все же встречаются, поэтому и появилась эта заметка.

Определять можно 2 способами: JS или jQuery.

Определение ширины или высоты с помощью чистого JS

Это самый предпочтительный способ, так как движок JavaScript есть практически у каждого современного браузера. Даже мобильные браузеры научились работать с JS.

Конечно же есть вероятность того, что пользователь собственноручно отключить обработку JS в браузере, но, кажется мне, таких «странных людей» не так много, так как практически каждый сайт использует какие-нибудь решения, работающие на JS.

В JS, чтобы определить размеры экрана, нужно использовать функции:

Вот бессмысленный пример использования:

Если Вы используете это для позиционирования каких-то элементов на странице, то лучшим решением будет использовать не размеры экрана, а размеры окна браузера. В JS это делается так:

Соответственно вот бессмысленный пример использования:

Определение размеров браузера с помощью jQuery

Лично я пользуюсь методом, который описан ниже. Этот метод работает только если у Вас на сайте ранее подключена библиотека jQuery. На всех сайтах, которые мне приходится делать эта библиотека является стандартом де`факто.

Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:

Читайте также:  1С записать форму программно

И в конце хотелось бы сказать, что если есть возможность обойтись без JS и jQuery вообще или частично, то именно так и нужно поступать.

  1. naimjonn опубликовал 20 Январь 2014, 12:13 #

Другого нельзя? кроме Alert? например с помощью get запроса отправить куда нибудь и использовать эти данных ?

Вообще то alert без смысленно его видит человек. Мне надо использовать эти данных(height:width) чтоб изменит какието элементи: if ($height>=600) < #code… >else

  • itshaman опубликовал 20 Январь 2014, 17:59 #

Я вроде и написал, что пример бессмысленный. Главное же возможность

Для чего нужно определять размер окна браузера, для тех случаев когда нам необходимо сделать например резиновый дизайн или чтобы блок целиком закрывал всю область окна браузера
на 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 > >

Читайте также:  Trace mode 6 готовые проекты

Поделись с друзьями:

комментария 4 для записи Определяем размер окна браузера (JavaScript, jQuery)

привет, вопрос к админу — а в фейсбуке вас нет?

« 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:

«>

Ссылка на основную публикацию
Insomnia the ark цена свободы
Очередь просмотра Очередь Удалить все Отключить YouTube Premium Хотите сохраните это видео? Пожаловаться Пожаловаться на видео? Выполните вход, чтобы сообщить...
High speed hdmi cable with ethernet
Приветствую всех посетителей блога о компьютерах. Сегодня бы очень хотелось поведать читателям о так называемом HDMI кабеле, с помощью которого...
Highscreen pure j 4pda прошивка
Внимание! Использование инструментов для перепрошивки неопытными пользователями может привести к выходу аппарата из строя. Установка этого обновления приведет к полному...
Instagram как выложить фото с компьютера
Зачем нужно выкладывать фото и видео в Инстаграм через компьютер? Инстаграм придумали, чтобы можно было быстро загрузить фото с телефона....
Adblock detector