Question

我正在使用jQuery为交互式网站触发不同的css过渡，例如将对象A移动到点击上的点1。现在，这些选项在不同的视口上应该是不同的。

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

所以我正在寻找像

这样的东西

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...
    }
});

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

Answer 2

您不需要 JavaScript！您可以使用媒体查询：

@media screen and (orientation: landscape) {
    /* code for landscape goes here */
}

@media screen and (orientation: portrait) {
   /* code for portrait goes here */
}

要在方向为横向时更改元素属性，并在桌面上使用以下媒体查询，它将检查屏幕是否至少为1024px（桌面的标准），并且屏幕方向为横向模式

@media screen and (min-width: 1024px) and (orientation: landscape) {
     #example {
        /* rules go here */
     }
}

Answer 3

当然，您可以使用css媒体查询，下面是一个示例

<强> HTML

<div id="test">
    Content goes here...
</div>

<强> CSS

@media screen and (orientation: landscape) {    
    #test{
        background:red;
        padding:20px;
    }
}

@media screen and (orientation: portrait) {
     #test{
        background:green;
        padding:20px;
    }
}

Fiddle Demo

Answer 4

如果您的jQuery绝对依赖于了解纵向模式（例如，操纵宽度），那么您将无法始终相信，比较窗口/ html /正文比例会为您提供与“ @media（方向：纵向）”相同的答案。我发现，根据浏览器的不同，可能会有很小的差异（奇怪的是，如果将窗口变宽，Chrome是正确的，但是当窗口变窄时，Chrome则是滞后的。）

为解决此问题，我添加了一个虚拟（空）div并将其隐藏在横向模式下。然后测试$（dummy div）.is（'：visible'）以确定浏览器是否认为它处于纵向模式。

jQuery在肖像/风景上的火功能

4 个答案: