用Jquery设置Min Height以避免移动问题

Question

我不知道这是否可行，但我正在寻找更改此工作功能的方法，以便将“ .nav_menu” div的高度设置为视口的一半，而不是将其设置为最小高度。

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单位的输出值。 因此，对此的任何解决方案将不胜感激！

Answer 1

在功能内进行检查是否可以解决问题？ 这就是为什么除非需要不需要设置元素的高度的原因，这基本上就是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();