Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: donoОтветов: 4

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

  • На этот вопрос довольно хорошо дан ответ: stackoverflow.com/questions/1766861/ vsync 23.03.2010

javascriptbrowserjquery

Ответы

Ответ 1 · рейтинг 9 · kennebec

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 перед проверкой тела - если он не равен 0, это высота "области просмотра", а body.clientHeight - это высота тела, которая может быть больше или меньше окна .

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

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

Ответ 2 · рейтинг 3 · Enrique

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

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

Ответ 3 · рейтинг 3 · Sriwantha Attanayake

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

function getSize(){

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

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


}

Ответ 4 · рейтинг 2 · Dzeimsas Zvirblis

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

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

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

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы