如何設置Javascript中

的我定製的_layout子目錄哲基爾博客的HTML模板文件中的液體變量的值。根據屏幕大小，我希望頁面以不同的方式佈置元素（在這種情況下，我決定不使用CSS媒體查詢）。如何設置Javascript中

我的理解是液體不支持屏幕尺寸的檢測，我想用JS這一點。在HTML模板的頂部，我想插入下面的代碼：在屏幕小於769px小

<script> 
    if (window.matchMedia("(max-width: 768px)").matches) { 
     {% assign screen_size = "small" %} 
    } else if (window.matchMedia("(min-width: 769px)").matches){ 
     {% assign screen_size = "large" %} 
    } 
</script>

不知何故，可變screen_size仍然被越來越設置爲large。對我來說毫無疑問，JS代碼正確地檢測屏幕大小，但看起來screen_size只是被分配給條件語句中的最後一個值。

我是新來的液體和不認爲你可以只使用{% assign %}一樣，在JS，所以這似乎腥。但是怎麼會/應該在JS中做這樣一個Liquid變量賦值呢？

（screen_size僅適用於該模板，並沒有其他的。）

來源

2017-01-19 orlando21

恐怕液體是在服務器上運行，並且你混合，並與客戶端的js代碼匹配吧..恐怕將無法正常工作確定..你必須找到解決JS爲您的佈局問題，只！ –

你會在哪裏使用'screen_size'？在呈現網站時完成液體分配，因此在JS中使用它是沒有意義的。 – marcanuy

'screen_size'會在if語句中的HTML之後的頁面中使用，例如：{{if if screen_size =='small'％}

'和頁面佈局... – orlando21

見What is the difference between client-side and server-side programming?，然後再考慮當你生成傑基爾靜態站點，通過液體用的值被確定您上傳的網頁之前網絡服務器。

你有同樣的問題，從客戶端JS獲取數據到服務器端代碼，但隨着時間的更大的分隔。

這是無法完成的。

我建議改變你對媒體查詢的頭腦和編寫一個標準的迴應，而不是網站。

來源

2017-01-19 14:46:14 Quentin

謝謝我不知道。顯然，JS正在執行，就好像沒有Liquid代碼一樣？ – orlando21

@ orlando21 - 是的。 – Quentin

如何設置Javascript中

回答

相關問題