Получить высоту и ширину окна просмотра браузера без полос прокрутки, используя jquery?

Question

Получить высоту и ширину окна просмотра браузера без полос прокрутки, используя jquery?

Как получить высоту и ширину окна просмотра браузера без полос прокрутки, используя jQuery?

Вот что я пробовал до сих пор:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

Это решение не учитывает полосы прокрутки браузера.

109

jquery

Источник

user1000116 09 янв '12 в 19:56

10 ответов

Другие вопросы по тегам jquery

user199647 09 янв '12 в 19:58 2012-01-09 19:58 · Answer 1 · 2012-01-09 19:58

$(window).height();
$(window).width();

Больше информации

Однако использование jQuery не обязательно для получения этих значений. использование

document.documentElement.clientHeight;
document.documentElement.clientWidth;

чтобы получить размеры, исключая полосы прокрутки, или

window.innerHeight;
window.innerWidth;

чтобы получить весь видовой экран, включая полосы прокрутки.

document.documentElement.clientHeight <= window.innerHeight;  // is always true

user1852300 26 янв '16 в 06:55 2016-01-26 06:55 · Answer 2 · 2016-01-26 06:55

Не используйте jQuery, просто используйте javascript для правильного результата:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

NB: это включает ширину / высоту полосы прокрутки.

45

Источник

user1852300 26 янв '16 в 06:55

user11662 26 сен '12 в 09:17 2012-09-26 09:17 · Answer 3 · 2012-09-26 09:17

Вот общий JS, который должен работать в большинстве браузеров (FF, Cr, IE6+):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

28

Источник

user11662 26 сен '12 в 09:17

user4484003 22 янв '15 в 19:18 2015-01-22 19:18 · Answer 4 · 2015-01-22 19:18

Вы используете неправильные вызовы методов. Окно просмотра - это "окно", открытое в документе: сколько его можно увидеть и где.

С помощью $(window).height() не даст вам размер области просмотра, он даст вам размер всего окна, которое обычно является размером всего документа, хотя документ может быть даже больше.

Чтобы получить размер фактического просмотра используйте window.innerHeight а также window.innerWidth,

https://gist.github.com/bohman/1351439

Не используйте методы jQuery, например $(window).innerHeight(), поскольку они дают неправильные номера. Они дают вам высоту окна, а не innerHeight,

user479659 09 янв '12 в 19:57 2012-01-09 19:57 · Answer 5 · 2012-01-09 19:57

Описание

Ниже приведен размер окна просмотра браузера.

Образец

$(window).height();   // returns height of browser viewport
$(window).width();   // returns width of browser viewport

Дополнительная информация

10

Источник

user479659 09 янв '12 в 19:57

user114298 08 сен '12 в 19:14 2012-09-08 19:14 · Answer 6 · 2012-09-08 19:14

Как предложил Кайл, вы можете измерить размер окна просмотра клиентского браузера, не принимая во внимание размер полос прокрутки.

Образец (Размеры окна просмотра БЕЗ полос прокрутки)

// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');

// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

В качестве альтернативы, если вы хотите найти размеры окна просмотра клиента, принимая во внимание размер полос прокрутки, то этот пример ниже подходит вам.

Во-первых, не забудьте установить ширину и высоту тега body на 100%, чтобы убедиться, что измерение точное.

body { 
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}

Образец (размеры окна просмотра с полосами прокрутки)

// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');

// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

user1869555 06 мар '14 в 15:59 2014-03-06 15:59 · Answer 7 · 2014-03-06 15:59

Сценарий $(window).height() работает хорошо (показывает высоту области просмотра, а не документ с высотой прокрутки), НО это требует правильного размещения тега doctype в документе, например, следующие типы doctype:

Для HTML5: <!doctype html>

для переходного html4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Вероятно, тип документа по умолчанию, предполагаемый некоторыми браузерами, таков, что $(window).height() принимает высоту документа, а не высоту браузера. Со спецификацией doctype она удовлетворительно решена, и я уверен, что вы, peps, избежите "изменения переполнения прокрутки на скрытый и затем обратно", что, извините, немного подвох, особенно если вы не Запишите это в коде для использования в будущем программистом.

Более того, если вы делаете сценарий, вы можете изобрести тесты, чтобы помочь программистам в ваших библиотеках, позвольте мне изобрести пару:

$(document).ready(function() {
    if(typeof $=='undefined') {
        alert("Error, you haven't called JQuery library");
    }
    if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
    } 
});

user7019693 14 окт '16 в 14:21 2016-10-14 14:21 · Answer 8 · 2016-10-14 14:21

$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});

3

Источник

user7019693 14 окт '16 в 14:21

user2586187 27 апр '16 в 07:43 2016-04-27 07:43 · Answer 9 · 2016-04-27 07:43

Используя jQuery...

$ (document).height () & $ (window).height () вернет те же значения... ключ в том, чтобы сбросить отступы и отступы тела, чтобы вы не получали прокрутку.

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

Надеюсь это поможет.

0

Источник

user2586187 27 апр '16 в 07:43

user10124924 23 июл '18 в 22:48 2018-07-23 22:48 · Answer 10 · 2018-07-23 22:48

Я хотел другой внешний вид моего сайта для ширины экрана и маленького экрана. Я сделал 2 CSS-файла. В Java я выбираю, какой из 2 CSS-файлов используется в зависимости от ширины экрана. Я использую функцию PHP echo с в echo-функция некоторого JavaScript.

мой код в <header> раздел моего PHP-файла:

<?php
echo "
<script>
    if ( window.innerWidth > 400)
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
    else
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
"; 
?>