Question

由于该概念的一些必要部分，因此需要视口大于＆gt; = 1：1但也<= 2：1。

当它不是1：1和2：1之间的值时，应该有一个div容器淡入，其中有一条文本消息。但是当视口比率然后被修正为合适的值时，它应该自动淡出。

每次Viewport维度更改时，不仅在页面加载时，都应该进行此检查。

有人可以帮我解决这个问题吗？

Answer 1

看看这个JSfiddle：https://jsfiddle.net/ChefGabe/e1vfhyuw/ （您可以调整输出窗口的大小以模拟页面调整大小）

第1行和第2行是事件侦听器。在页面加载时解析HTML后会触发DOMContentLoaded。调整大小时会resize。（等等）。

（编辑：DOMContentLoaded无法在JSfiddle中工作，但它应该在真实情况下工作）

我使用this StackOverflow question来获取浏览器的宽度和高度。

希望有所帮助！

Answer 2

要检查窗口的大小，请收听onresize对象触发的window事件，resize事件可以在短时间间隔内多次触发，因此最好只在经过一定时间后执行回调，因此throttle()函数

function throttle(interval, fn) {
  var inProgress;
  return function() {
    if (inProgress) {
      clearTimeout(inProgress);
    }
    else {
      inProgress = setTimeout(fn, interval);
    }
  }
}

var onResize = throttle(500, function() {
  if ((screen.availWidth / screen.availHeight) <= 2)
    fadeIn();
  else
    fadeOut();
});
window.addEventListener('resize', onResize, false);

Answer 3

你实际上甚至不需要JavaScript。我建议通过纯CSS media query来解决这个问题。 aspect ratio有一个，所以我们使用

之类的东西

@media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) { ... }

然后，您可以在查询中触发消息的可见性。

@media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
    .ratio-message {
        /* Whatever custom animation to reveal the message like opacity or display */
        transform: translateX(0);
    }
}

jsfiddle上的一个例子。

按视口比例淡入/淡出

3 个答案: