Почему $(window).height() так неправильно?

Я пытаюсь получить текущую высоту видового экрана браузера, используя

$(window).on('resize',function() { 
  console.log("new height is: "+$(window).height()); 
});

Но я получаю значения, которые слишком низки. Когда область просмотра около 850px высотой, я получаю значения около 350 или 400 пикселей с высоты(). Что?

Пример: http://jsfiddle.net/forgetcolor/SVqx9/

Ответы

Ответ 1

Одна из возможных причин может заключаться в том, что вы проверяете консоль с помощью firebug/something else. Так что вы не получите правильную высоту окна из-за высоты Firebug.

Вы можете попробовать что-то вроде этого:

возьмите в документе документ span/div:

<span id="res"></span>

а затем

$(window).on('resize',function() { 
  $('#res').html("new height is: "+$(window).height()); 
});

Или, если вы хотите проверить, наденьте консоль firebug, затем отделите его от браузера и затем проверьте результат.

Ответ 3

Для тех, у кого еще есть проблемы после вышеописанных решений...

Пожалуйста, проверьте коэффициент просмотра браузера на ваш project.html..

Значение $(window).height() не совпадает с "реальными" пикселями клиентской области при изменении отношения просмотра! (и поэтому другие $(xx).width()... в этой ситуации)

(Браузер вспомнил мое неосторожное соотношение 110%, настроенное днями назад...)

Ответ 4

Нет воспроизведения. Имейте в виду, что высота окна уменьшается с помощью элементов в браузере 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>

Ответ 5

JSFiddle работает, создавая <iframe>, который динамически загружается после рендеринга кода.

Ваш JavaScript вычисляет высоту окна, которая является высотой <iframe>, которая для меня составляет около 400 пикселей.

Ваш код делает то, что должно быть.

Ответ 6

Я видел, как jQuery $(window).height() возвращал неправильное значение на мобильном телефоне Chrome, хотя мои объявления в области viewport и DOCTYPE были на месте. В конце концов я использовал window.innerHeight.