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

Рубрика: JavaScripts, jQuery

Для чего нужно определять размер окна браузера, для тех случаев когда нам необходимо сделать например резиновый дизайн или чтобы блок целиком закрывал всю область окна браузера
на jQuery это делается так:


doc_w = $(document).width();
doc_h = $(document).height();
//или
win_w = $(window).width();
win_h = $(window).height();

но если же надо знать размеры каждый раз при ресайзе окна то код будет следующим:
$( window ).resize(function() {$( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );});

На 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;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

return [pageWidth,pageHeight,windowWidth,windowHeight];
}


Теги:


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

комментария 4

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

  1. Elliott1962:
    10.06.2012 в 18:31

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

  2. konsvik:
    12.05.2013 в 12:00

    За содержание спасибо.

  3. Антон:
    23.03.2016 в 06:36

    var windowWidth, windowHeight; вот эта строчка лишняя, если ее не убрать, то скрипт не вернет значение этих двух переменных