Подтвердить что ты не робот

Размер браузера (ширина и высота)

Я пытаюсь определить текущий размер браузера (ширина и высота). Я знаю, что это очень просто в jQuery с $(document).width and $(document).height, но я не хочу добавлять размер jQuery lib к проекту, поэтому я бы скорее использовал встроенный JavaScript. Каким будет короткий и эффективный способ сделать то же самое с JavaScript?

4b9b3361

Ответ 1

// first get the size from the window
// if that didn't work, get it from the body
var size = {
  width: window.innerWidth || document.body.clientWidth,
  height: window.innerHeight || document.body.clientHeight
}

Ответ 2

function getWindowSize(){
 var d= document, root= d.documentElement, body= d.body;
 var wid= window.innerWidth || root.clientWidth || body.clientWidth, 
 hi= window.innerHeight || root.clientHeight || body.clientHeight ;
 return [wid,hi]
}

IE-браузеры - единственные, кто не использует innerHeight и Width.

Но нет стандартных "реализаций браузера".

Проверяйте html (document.documentElement) clientHeight перед проверкой body- если это не 0, это высота "окна просмотра", а body.clientHeight - это высота тела, которая может быть больше или меньше окна.

Обратный режим возвращает 0 для корневого элемента и высоты окна (viewport) из тела.

То же самое с шириной.

Ответ 3

Попробуйте это;

 <script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight);
</script> 

Ответ 4

Вот пример кода

function getSize(){

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;


}

Ответ 5

В моем случае для window.innerWidth задействовано создание настраиваемого модального всплывающего окна. Проще говоря, пользователь нажимает кнопку, всплывающее окно открывается в центре браузера, и за всплывающим окном появляется прозрачный черный bkgd. Моя проблема заключалась в поиске ширины и высоты браузера для создания прозрачного bkgd.

window.innerWidth отлично работает, чтобы найти ширину, но помните, что window.innerWidth and window.innerHeight не компенсирует полосы прокрутки, поэтому, если ваш контент выходит за пределы видимой области содержимого. Мне пришлось вычесть 17px из значения.

transBkgd.style.width = (window.innerWidth - 17) + "px";

Поскольку содержимое сайта всегда выходит за пределы видимой высоты, я не мог использовать window.innerHeight. Если пользователь прокрутил вниз, прозрачный bkgd закончил бы в тот момент, и это выглядело просто противным. Чтобы поддерживать прозрачный bkgd вплоть до нижней части содержимого, я использовал document.body.clientHeight.

transBkgd.style.height = document.body.clientHeight + "px";

Я тестировал всплывающее окно в IE, FF, Chrome, и он выглядит хорошо по всем направлениям. Я знаю, что это не слишком сильно связано с оригинальным вопросом, но я полагаю, что это может помочь, если кто-то еще столкнется с той же проблемой при создании настраиваемого модального всплывающего окна.