Как получить высоту и ширину окна просмотра браузера без полос прокрутки с помощью jQuery?
Вот что я пробовал до сих пор:
var viewportWidth = $("body").innerWidth();
var viewportHeight = $("body").innerHeight();
Это решение не учитывает полосы прокрутки браузера.
$(window).height();
$(window).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);Вот общий 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
Как предложил Кайл, вы можете измерять размер видового экрана браузера клиента, не принимая во внимание размер полос прокрутки таким образом.
Пример (размеры Viewport без полос прокрутки)
// 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 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 original value (default is auto)
$('body').css('overflow', 'auto');
script $(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">
Вероятно, тип doctype по умолчанию, используемый некоторыми браузерами, таков, что $(window).height() занимает высоту документа, а не высоту браузера. С спецификацией doctype, она удовлетворительно решена, и я уверен, что вы будете избегать "изменения переполнения прокрутки до скрытого, а затем назад", то есть, извините, немного грязный трюк, особенно если вы не знаете, t документируйте его в коде для использования будущим программистом.
Кроме того, если вы делаете script, вы можете придумать тесты, чтобы помочь программистам в ваших библиотеках, позвольте мне придумать пару:
$(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() вернет те же значения... ключ находится в reset заполнении и разметке тела, чтобы вы не прокручивали.
<!--
body {
padding: 0px;
margin: 0px;
position: relative;
}
-->
Надеюсь, что это поможет.
Я хотел другой вид моего сайта для ширины экрана и маленького экрана. Я сделал 2 CSS файла. В Java я выбираю, какой из 2 CSS файлов используется в зависимости от ширины экрана. Я использую PHP-функцию echo с в echo -function некоторым 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>
";
?>