jQuery portrait/landscape 上的触发功能

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

你不需要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 2

当然，您可以为此使用 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 3

试试这个脚本，您可以在调整大小期间获得 window 高度和宽度，而无需使用 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 4

如果您的 jQuery 完全取决于了解纵向模式（例如，操纵宽度），您不能总是相信比较 window/html/body 比率会给您与 '@media (方向：纵向）。我发现，根据浏览器的不同，可能存在小范围的分歧（奇怪的是，如果 window 变宽，Chrome 是正确的，但变窄时会滞后）。

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

jQuery portrait/landscape 上的触发功能

jQuery fire function on portrait/landscape

html

css

jquery

screen-orientation