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

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

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

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

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

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

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

• http://api.jquery.com/height/
• http://api.jquery.com/width/

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

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

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

window.innerHeight;
window.innerWidth;

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

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

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

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

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

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

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

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

Вот общий 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;
}

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

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

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

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

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

Описание

Следующее даст вам размер области просмотра браузеров.

Образец

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

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

• jQuery.height ()
• jQUery.width ()

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

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

// 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');

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

Сначала не забудьте установить тег тела на 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');

Скрипт $(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 она удовлетворительно решена, и я почти уверен, что вы, ребята, избежите «изменения переполнения прокрутки на скрытое, а затем обратно», что, извините, немного грязный трюк, особенно если вы этого не сделаете • задокументируйте его в коде для будущего использования программистом.

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

$(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");
    } 
});

$(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});

});

Использование jQuery ...

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

<!--

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

-->

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

Я хотел, чтобы мой веб-сайт выглядел по-другому, для экрана шириной и маленьким экраном. Я сделал 2 файла CSS. В Java я выбираю, какой из двух 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>
"; 
?>