2

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

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

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

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

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

4

1 回答 1

3

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

当我尝试将 resize 事件添加到函数时，我的代码如下所示：

$(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
    };
)};
于 2012-12-14T16:45:47.243 回答