Установите минимальную высоту с помощью JQuery, чтобы избежать проблем с мобильным телефоном

Я не знаю, возможно ли это, но я хочу изменить эту рабочую функцию, чтобы вместо установки высоты моего div ".nav_menu" равной половине области просмотра он устанавливал минимальную высоту.

var menu = jQuery(".nav_menu");
  jQuery(window).resize("resizeMenu");
  function resizeMenu() {
    menu.height(jQuery(window).height() / 2);
  }
resizeMenu();

Теперь причина, по которой я не хочу делать что-то подобное ...

$('.nav_menu').css("min-height", "50vh");

Или просто сделайте это прямо в css из-за проблемы с пересчетом высоты, которая возникает на мобильном устройстве, когда скрывается адресная строка. Вышеупомянутая функция обходит эту проблему, но настроена на работу с высотой, а не с минимальной высотой.

В конечном итоге моя цель - иметь возможность использовать значение единицы измерения VH или% для минимальной высоты элемента, не создавая проблемы на Android, когда вы прокручиваете сверху и скрывает адресную строку браузера, он пересчитывает размер области просмотра, таким образом изменяя выходное значение единицы% или VH. Поэтому мы очень ценим любое решение!


mobile javascript jquery css viewport
person Sam Assoum    schedule 21.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Решит ли проблему проверка в рамках функции? Вот почему вы не устанавливаете высоту элемента, если она не нужна, что в основном и делает стиль min-height. Что-то вроде:

var menu = jQuery(".nav_menu");
jQuery(window).resize("resizeMenu");
function resizeMenu() {
    var windowHeight = jQuery(window).height();
    if (menu.height < windowHeight / 2){
        menu.height( windowHeight / 2);
    }
}
resizeMenu();
person Brice    schedule 01.07.2016
comment
Хммм Я пробовал это, но это не сработало, спасибо! - person Sam Assoum; 10.07.2016