Enquire.js 最初不匹配，仅在调整大小时匹配

Question

我正在使用 Enquire.js and Vue.js. It all pretty much works when I resize the browser's window manually. However, I get no match on document load, an odd behavior that is most obvious when switching Chrome's toggle device mode on or when accessing the site on a mobile phone. I checked with the "Match & Unmatch Example" 进行媒体查询，并且在所述模式下或使用移动设备 phone 访问时，它按预期工作。我想知道 Vue.js 和 Enquire.js 之间是否存在某种不兼容性，或者我做错了什么？

媒体查询的逻辑在我的 vue 实例的就绪钩子上：

ready:
    function () {
        var self = this;
        enquire.register("screen and (max-width: 400px)", {
            match: function () {
                self.displayIsLarge = false;
                self.displayIsSmall = true;
            },
            unmatch: function () {
                self.displayIsLarge = true;
                self.displayIsSmall = false;
            }
        })
    );

在我的 vue 实例上，我有以下数据属性：

var menu = new Vue({
el: '#app',
data: {
    displayIsLarge: true,
    displayIsSmall: false,

在我的 html 文件中，我根据浏览器的大小使用 v-if="displayIsSmall" 和 v-if="displayIsLarge" 到 hide/display 元素。 JsdFiddle here.

同时我想到，我也许可以通过 Setup 回调来解决这个问题，也许是有条件的，像这样：

enquire.register("screen and (max-width: 400px)", {
    setup: function() {
        if (this.match) {
            self.displayIsSmall = true;
        }
        else {
            self.displayIsSmall = false;
        }
    },
    match: function () {
        self.displayIsLarge = false;
        self.displayIsSmall = true;
    },
    unmatch: function () {
        self.displayIsLarge = true;
        self.displayIsSmall = false;
    }
})

这没有按预期工作。我错过了什么？ JsdFiddle here.

更新

Vue 的 beforeCompile or created 钩子（而不是 ready）也不走运。

Answer 1

unmatch 仅当您从 match 转到 unmatch 时才会发生。因此它不会发生，直到你低于 400px 然后再回到它上面。我建议您采用移动优先的方法并改为执行类似的操作。

new Vue({
  el: '#app',
  data: {
    displayIsLarge: false,
    displayIsSmall: true
  },
  ready: function () {
    var self = this;
    enquire.register("screen and (min-width: 400px)", {
        match: function () {
            self.displayIsLarge = true;
            self.displayIsSmall = false;
        },
        unmatch: function () {
            self.displayIsLarge = false;
            self.displayIsSmall = true;
        }
    })
  }
})

这是一个小演示：https://jsfiddle.net/crswll/uc7gaec0/

不过，根据这些元素实际包含的内容 and/or，使用 CSS 在视觉上切换它们可能更有意义。不过你比我清楚。

Answer 2

除了确保我在页面加载时获得 match 而不仅仅是在调整大小之后（如上述答案中所述），我还必须在我的视图中添加一个 <meta> 视口标签index.html。例如，添加以下元标记将强制视口缩放到设备的尺寸，现在呈现正确的样式（即移动设备）：

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 将使页面宽度与设备宽度相等，而 initial-scale=1 将在页面加载时设置初始缩放。

更多详情here。

Enquire.js 最初不匹配，仅在调整大小时匹配

Enquire.js does not match initially, only on resize

javascript

media-queries

vue.js

enquire.js