jQuery调整大小仅部分工作

Question

好的，首先，我对javascript不是很熟悉，所以如果这看起来是一个非常愚蠢的问题，请原谅......

这是我的代码，用于根据窗口高度（徽标、标题）和导航栏根据动态调整大小的徽标和标题的宽度动态调整标题项的大小：

function titlesize (){
  var winsize = {
    width: document.documentElement.clientWidth || window.innerWidth || document.body.offsetWidth,
    height: document.documentElement.clientHeight || window.innerHeight || document.body.offsetHeight
  };

  var titlefont = $(".title");
  var logo= $(".logo");
  var logow = winsize.height * 0.2;
  var logoh = winsize.height * 0.15;
  var titlefontsize = winsize.height * 0.03;
  var titlew = titlefontsize * 7;

  if (winsize.height > 580) {
    logo.css({width: logow, height: logoh});
    titlefont.css('font-size', function(){return (titlefontsize);});
    titlefont.css('width', function(){return (titlew);});
  }
  else {
    var logow = "150";
    var logoh = "100";
    var titlew = "122.5";
    logo.css({width: logow, height: logoh});
    titlefont.css({'font-size': "17.5px", width: titlew});
  }

  if ((winsize.width > 480) && ((winsize.width * 0.9) < (logow + titlew + 420))) {
    $("nav").css({float: "left"});
  }
}
$(document).ready(function() {titlesize(); $(window).resize(titlesize);$(window).load(titlesize);});

说明：我有一个标题标志和文本根据窗口高度而不是通常的宽度动态调整大小，这样整体标题不会占用太多屏幕（尤其是在移动设备上风景）。

然后将放置导航栏：如果有足够的空间，则位于右上角（默认），或位于标题下方（浮动：左）。

问题是：调整窗口大小确实可以很好地调整徽标和文本的大小，但不能调整导航栏。这只会对重新加载做出反应，而不会对调整大小做出反应。有什么原因吗？

我怀疑这是因为从第一个 if else 语句派生的那些动态变量的依赖性。我很确定有一个简单的解决方案，但是什么？

感谢您的帮助。

PS：试图制作一个 jsfiddle，但它给了我 POST 错误（不知道为什么，没有表单提交或类似的东西）

编辑和解决方案

找出它不起作用的原因：只是在 var 声明中犯了一个错误

我在函数 vars logow 和 titlew 的 else 部分中设置了 quotes 中的固定值，因此 js 将它们视为文字而不是数字。因此，导航的计算就搞砸了。将这些变量声明为数字 (var logow = 150;) 就成功了。

仍然感谢您的帮助和高度媒体查询的重要提示！

Answer 1

DominicaJune 是对的。您可以使用媒体查询来获取高度：

http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/

Answer 2

您已准备好在文档中调整大小。 如果你有：

$(document).ready(function(){
//some code
});

$(window).resize(function(){
//your resize code
});

它应该一直有效。虽然媒体查询看起来要简单得多。