纵向/横向上的 jQuery 消防功能

Question

我正在使用 jQuery 为交互式网站触发不同的 css 转换，例如单击时将对象 A 移动到位置 1。现在这些选项在不同的视口(viewport)上应该是不同的。

虽然在 css 中使用类很容易实现这一点，但我不知道当视口(viewport)从横向变为纵向时如何触发函数。 只有桌面屏幕，不需要移动设备。

所以我正在寻找类似的东西

If "screen width" > "screen height" {
  //fire function 1, which contains something like
  $('#example').animate({ "top": "5%", "left": "50%" }, 100);
}

If "screen height" > "screen width" {
  //fire function 2, which contains something like
  $('#example').animate({ "top": "50%", "left": "5%" }, 100);
}

这样，当我调整浏览器大小时，网站始终保持以最佳方式显示(无需重新加载页面)。

我发现了一个有用的脚本来检测低至 IE6 的浏览器高度和宽度 which you can find in my demo jsfiddle ，但我无法在调整浏览器大小时使其工作。

我很感激每一个提示或技巧!

Answer 1

尝试这个脚本，您可以在调整大小期间获取窗口高度和宽度，而无需使用 jquery 函数重新加载

$(window).resize(function () {
    var height = $(window).height();
    var width = $(window).width();
    console.log('width is : ' + width);
    console.log('height is : ' + height);    
    if (height > width) {
        do something...
    }
    if (height < width) {
        do something...
    }
});

您可以添加调整大小时需要执行的功能