Найти высоту мобильного Safari Chrome?

Question

Я загружаю элемент в браузер, а затем изменяю его размер в зависимости от высоты окна:

        window_height = $(window).height();
        $("map-canvas").height(window_height);

Работает нормально во всех браузерах, кроме мобильного Safari.

В мобильном Safari страница загружает с правильной высотой.

Но вскоре после этого верхний хром браузера исчезает (хотя нижняя панель кнопок остается).

Когда это происходит, содержимое страницы перемещается вверх, но внизу остается большое пространство, равное высоте браузера Chrome.

Как найти и компенсировать высоту браузера chrome?

В идеале я бы сделал (псевдокод):

if browser chrome is visible:
    subtract height of browser chrome from window height
set map height to window height
add event listener - when browser chrome disappears:
    set map height to window height + height of browser chrome

Answer 1

Я думаю, что нашел способ, как получить правильную высоту окна в iOS Mobile Safari, проверьте мой ответ на похожий вопрос - jQuery / JS, iOS 4 и $ (document) .height () проблемы

Answer 2

Вы должны просто использовать свойство window.innerHeight. Это даст вам доступную высоту окна без хрома.

Также, если вы никогда не смотрели на какой-либо объект window.screen, это даст вам другие полезные свойства.

Пример:

window.screen

Screen {
    availHeight: 1200,
    availLeft: 1680,
    availTop: 0,
    availWidth: 1920,
    colorDepth: 24,
    height: 1200,
    pixelDepth: 24,
    width: 1920
}

window.innerHeight

916

Итак, вы можете ясно видеть, что хром в моем браузере chrome занимает 284 пикселя.

var browserChrome = (window.screen.height - window.innerHeight);

Answer 3

добавить прослушиватель событий - когда браузер Chrome исчезает: установить высоту карты в высоту окна + высота браузера хром

Вы можете использовать событие изменения размера окна

window.resize = function(){
  document.getElementById('map-canvas').style.height = window.height + 'px';
}