javascript - 使用 Jquery 设置最小高度以避免移动问题

Question

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

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 上产生问题，当您从顶部滚动时，浏览器地址栏隐藏，它会重新计算视口(viewport)大小，从而改变 % 或 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();