Отримати висоту та ширину вікна перегляду браузера без прокрутки за допомогою 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

Не використовуйте методи jQuery, наприклад $(window).innerHeight(), оскільки вони дають неправильні числа. Вони дають вам висоту вікна, ні 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 у своєму документі, наприклад, ці доктрипи:

Для 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 це вирішено задовільно, і я впевнений, що ви, пепси, уникнете "зміни переливу прокрутки на прихований, а потім назад", що, пробачте, трохи брудний трюк, особливо якщо ви не хочете " t задокументуйте його на код для використання майбутнім програмістом.

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

$(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 я вибираю, який із 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>
"; 
?>