Enquire.js最初不匹配，只有調整大小

我正在做媒體查詢Enquire.js和Vue.js。當我手動調整瀏覽器窗口的大小時，這一切都非常有效。但是，我無法匹配文檔加載，這是在Chrome訪問移動電話上的網站時切換Chrome切換設備模式時最明顯的一種行爲。我使用"Match & Unmatch Example"進行了檢查，並且在所述模式或使用移動電話訪問時，按預期工作。我想知道Vue.js和Enquire.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"根據瀏覽器的大小隱藏/顯示元素。 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。

UPDATE

沒有運氣或者與Vue公司的beforeCompile或created掛鉤（而不是ready）。

來源

2016-03-31 pierrebonbon

你發佈的第一個小提琴正在爲我工作。你有什麼問題？當JSFiddle的窗格寬度爲400px時，它會切換。其實他們都在爲我工作 – Jeff

@Jeff問題是它不匹配頁面加載時的文檔大小匹配/不匹配。這意味着在上面的JsFiddles中，只有當我們手動調整它的大小時，它才匹配或不匹配窗格大小。 – pierrebonbon

'不匹配'只發生在從'match'到'unmatch'的情況下，如果以'unmatch'開頭，則不會發生。您應該首先訪問此移動設備，並將「isSmallScreen」設置爲「true」，然後更改您查詢到'min-width'然後切換它們。 –

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/

雖然，這取決於這些元素實際上包含和/或這樣做可能更有意義，只需撥動他們視覺與CSS。不過，你知道比我更好的事情。

來源

2016-03-31 21:09:44

感謝您的回答！我希望這是它，但是當我打開「Chrome設備模式」時，它不會產生預期的結果。在頁面加載時，或者手動調整瀏覽器窗口大小時，它會按預期工作。請參閱[這裏的時間很長]（https://gyazo.com/46ed7c337ec9aaaa3187de3bc45a44ef）和[這裏的時間很小]（https://gyazo.com/3bd972a445c583926bf049372ee34cba）。但是，當我打開「Chrome設備模式」[使用320像素寬的設備]時（https://gyazo.com/fd8655d759cd95b9eaacfee54ed45b33），它不會切換爲小型應用。 – pierrebonbon

沒有代碼，屏幕截圖不是非常有用。只是要清楚，除非'匹配'首先發生，否則'不匹配'內部什麼都不會發生。所以你可以在400像素以內調整所有你想要的尺寸，並且「不匹配」將永遠不會觸發，除非你再次從400像素以上再次下去。 –

謝謝你的澄清。儘管如此，不要理解爲什麼當瀏覽器加載（以及調整大小）時，如果瀏覽器的窗口寬度小於400像素，代碼會變成「匹配」，而當Chrome的「切換」時，同樣的事情不會發生設備模式「開啓（或從手機訪問頁面時）。 – pierrebonbon

除了確保我的頁面加載了一個match不僅調整大小（如上面的答案詳述）之後，我必須在我的index.html添加<meta>視標籤。添加例如下面的元標記將迫使視擴展到設備的尺寸，現在呈現正確的樣式（即手機）：

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

的width=device-width將頁面的寬度之間的等價到的設備，而initial-scale=1將設置頁面加載時的初始縮放。

更多詳細信息here。

來源

2016-04-02 16:47:09 pierrebonbon

Enquire.js最初不匹配，只有調整大小

回答

相關問題