Проблемы jQuery/JS, iOS 4 и $(document).height()

У меня возникла странная проблема с тем, что, по-видимому, представляет собой различные версии браузеров Webkit. Я пытаюсь расположить элемент в центре экрана и делать вычисления, мне нужно получить различные размеры, в частности, высоту тела и высоту экрана. В jQuery я использовал:

var bodyHeight = $('body').height();
var screenHeight = $(window).height();

Моя страница обычно намного выше фактического окна просмотра, поэтому, когда я 'предупреждаю' эти переменные, bodyHeight должен быть большим, в то время как screenHeight должен оставаться постоянным (высота окна просмотра браузера).

Это верно в  - Fire Fox  - Chrome 15 (whoa! Когда Chrome добрался до версии 15?)  - Safari на iOS5

Это НЕ работает:  - Safari на iOS4  - Safari 5.0.4

В последнем случае $(window).height(); всегда возвращает то же значение, что и $('body').height()

Подумав, что это была проблема jQuery, я поменял высоту окна на window.outerHeight, но это тоже делает то же самое, заставляя меня думать, что это на самом деле какая-то проблема веб-кита.

Кто-нибудь сталкивался с этим и знал об этом?

Чтобы усложнить ситуацию, я не могу воспроизвести это отдельно. Например: http://jsbin.com/omogap/3 отлично работает.

Я определил, что это не проблема с CSS, поэтому, возможно, есть и другие JS, разрушающие этот конкретный браузер, который мне нужно найти.

ОТВЕТЫ

Ответ 1

Я боролся с этим очень долго (из-за ошибка моего плагина), и я нашел способ, как чтобы получить правильную высоту окна в Mobile Safari.

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

Некоторые тесты (на iPhone с размером экрана 320x480, в ландшафтном режиме):

// Returns height of the screen including all toolbars
// Requires detection of orientation. (320px for our test)
window.orientation === 0 ? screen.height : screen.width


// Returns height of the visible area
// It decreases if you zoom in
window.innerHeight


// Returns height of screen minus all toolbars
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// In fullscreen mode it always returns 320px. 
// Doesn't change when zoom level is changed.
document.documentElement.clientHeight

iOS window height

Вот как определяется высота:

var getIOSWindowHeight = function() {
    // Get zoom level of mobile Safari
    // Note, that such zoom detection might not work correctly in other browsers
    // We use width, instead of height, because there are no vertical toolbars :)
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height.
    return window.innerHeight * zoomLevel;
};

// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
    var tH = (window.orientation === 0 ? screen.height : screen.width) -  getIOSWindowHeight();
    return tH > 1 ? tH : 0;
};

В такой технике есть только один символ: он не пиксель идеален при увеличении страницы (поскольку window.innerHeight всегда возвращает округленное значение). Он также возвращает неправильное значение при приближении к верхней панели.

Прошел год с тех пор, как вы задали этот вопрос, но в любом случае надеюсь, что это поможет!:)

Ответ 2

Это 2015 год, сейчас мы на iOS 8. iOS 9 уже не за горами. И проблема по-прежнему с нами. Вздох.

Я внедрил кросс-браузерное решение для размера окна в jQuery.documentSize. Он остается свободным от любого вида нюхания в браузере и подвергается сильному тестированию. Вот как это работает:

  • Вызовите $.windowHeight() для высоты визуального просмотра. Это высота области, которую вы на самом деле видите в области просмотра на текущем уровне масштабирования, в пикселях CSS.
  • Вызовите $.windowHeight( { viewport: "layout" } ) для высоты layout viewport. Это высота, которую видимая область будет иметь при масштабировании 1:1 - "высота оригинального окна".

Просто выберите соответствующий видовой экран для своей задачи, и все готово.

За кулисами вычисление примерно следует процедуре, описанной в ответе by @DmitrySemenov. Я написал о шагах, связанных с в другом месте на SO. Проверьте это, если вы заинтересованы, или посмотрите на исходный код.

Ответ 3

У меня была аналогичная проблема. Это имело отношение к 2 вещам:

Свойство CSS3 для определения размера CSS: В документации . Height() jQuery Я нашел это:

Обратите внимание, что .hight() всегда возвращает высоту содержимого, независимо от значения свойства CSS-размера. Начиная с jQuery 1.8, это может потребовать получить свойство высоты CSS плюс размер окна, а затем вычесть любую потенциальную границу и дополнение для каждого элемента, когда элемент имеет размер коробки: border-box. Чтобы избежать этого штрафа, используйте .css( "height" ), а не .height().

Это может относиться к $('body').height().

Готовый документ vs Window.load

$(document).ready() запускается, когда DOM готов для JS, но возможно, что изображения еще не закончили загрузку. С помощью $(window).load() исправлена ​​моя проблема. Подробнее.

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

Ответ 4

Попробуйте следующее:

var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()

Ответ 5

Решение перекрестного браузера установлено, что jQuery

Используйте это свойство: $(window).height()

Это возвращает значение int, которое представляет размер видимой высоты экрана браузера в пикселях.