Я пытаюсь получить текущую высоту видового экрана браузера, используя
$(window).on('resize',function() {
console.log("new height is: "+$(window).height());
});
Но я получаю значения, которые слишком низки. Когда область просмотра около 850px высотой, я получаю значения около 350 или 400 пикселей с высоты(). Что?
Одна из возможных причин может заключаться в том, что вы проверяете консоль с помощью firebug/something else. Так что вы не получите правильную высоту окна из-за высоты Firebug.
Вы можете попробовать что-то вроде этого:
возьмите в документе документ span/div:
<span id="res"></span>
а затем
$(window).on('resize',function() {
$('#res').html("new height is: "+$(window).height());
});
Или, если вы хотите проверить, наденьте консоль firebug, затем отделите его от браузера и затем проверьте результат.
У меня была такая же проблема в Firefox, но я добавил <!DOCTYPE HTML> в свой индекс, и он сработал.
Источник: http://viralpatel.net/blogs/jquery-window-height-incorrect/
Для тех, у кого еще есть проблемы после вышеописанных решений...
Пожалуйста, проверьте коэффициент просмотра браузера на ваш project.html..
Значение $(window).height() не совпадает с "реальными" пикселями клиентской области при изменении отношения просмотра! (и поэтому другие $(xx).width()... в этой ситуации)
(Браузер вспомнил мое неосторожное соотношение 110%, настроенное днями назад...)
Нет воспроизведения. Имейте в виду, что высота окна уменьшается с помощью элементов в браузере Chrome, таких как адресная строка, инструменты разработчика, панели инструментов закладок и многое другое. Ниже показано точное отображение высоты окна просмотра:
jsbin даст вам довольно хорошую оценку высоты окна, так как он не ограничивает вывод вашего кода небольшим iframe, как другие сайты тестирования js, такие как jsfiddle.
http://jsbin.com/otaqej/edit#javascript,html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script>
</head>
<body>
<div id="message">Height: 0</div>
<script>
$(window).on("resize", function(){
$("#message").html( "Height: " + $(window).height() );
});
</script>
</body>
</html>
JSFiddle работает, создавая <iframe>, который динамически загружается после рендеринга кода.
Ваш JavaScript вычисляет высоту окна, которая является высотой <iframe>, которая для меня составляет около 400 пикселей.
Ваш код делает то, что должно быть.
Я видел, как jQuery $(window).height() возвращал неправильное значение на мобильном телефоне Chrome, хотя мои объявления в области viewport и DOCTYPE были на месте. В конце концов я использовал window.innerHeight.