javascript - 移动设备和浏览器屏幕方向不同的 javascript/jQuery 函数

Question

免责声明:我不是 javascript 或 jQuery 专家。

这可能是一个容易解决的问题，因为它只是一个我无法解决的小问题。如果浏览器处于横向模式，我正在实现一个水平站点，如果浏览器处于纵向模式，则实现垂直站点。 CSS 更改不是问题，因为媒体查询很容易做到这一点。我遇到的问题是当我只想在屏幕处于横向模式时运行特定脚本。我遇到的下一个问题是我不仅希望它在移动设备上运行，而且我还希望它在标准浏览器中也能响应；即检测屏幕宽度>屏幕高度并运行所述脚本。到目前为止，这是我的代码:

var height = $(window).height();
var width = $(window).width();
if (width > height) {
    //run landscape script
} else {
    //run portrait script
};

当页面加载时，它可以很好地检测方向，但是当屏幕调整大小时它不会改变，因为脚本没有绑定(bind)到 window.resize。也就是说，当我将它绑定(bind)到 window.resize 时它也不起作用。

有没有更好的方法来解决这个问题？还是我只需要修复这里已有的东西？

Answer 1

以防将来其他人遇到这个问题，我会发布解决我的问题的方法。

当我尝试将调整大小事件添加到函数时，我的代码如下所示:

$(window).on('resize', function() {
    var height = $(window).height();
    var width = $(window).width();
    if (width > height) {
        //run landscape script
    } else {
        //run portrait script
    };
)};

这工作得很好，但它并没有那样显示，因为脚本仅在浏览器调整大小时被触发。虽然这是必不可少的，但脚本也需要在页面加载时触发。我的解决方案只是将“加载”添加到事件中:

$(window).on('resize load', function() {
    var height = $(window).height();
    var width = $(window).width();
    if (width > height) {
        //run landscape script
    } else {
        //run portrait script
    };
)};