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

Question

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

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

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

Это верно в - Firefox - Chrome 15 (воу! Когда Chrome попал в версию 15?) - Safari на iOS5

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

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

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

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

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

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

Answer 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 

Вот каквысота обнаружена:

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 всегда возвращает округленное значение).Он также возвращает неправильное значение, когда вы приближаетесь к верхней панели.

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

Answer 2

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

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

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

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

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

Answer 3

У меня была похожая проблема. Это было связано с 2 вещами:

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

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

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

Документ готов против Window.load

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

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

Answer 4

Попробуйте это:

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

Answer 5

Для кросс-браузерного решения устанавливается jQuery

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

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