画面幅に応じて条件分岐をしたい

日本語 ディスカッション 技術的なQ＆A
1

liquidで画面幅を取得してifで画面幅によって出力を切り替えることって可能ですか？

また、どうすればできるかご教授いただけますと幸いです。

2

その場合はCSSのメディアクエリで操作するのが一般的ですね。
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries

例えばこんな感じのCSSとHTMLを書けば、画面幅に応じてコンテンツが変わります。

.content {
	display: none;
}
@media screen and (max-width: 559px) {
	.content.mobile {
		display: block;
	}
}
@media screen and (min-width: 560px) and (max-width: 959px){
	.content.tablet {
		display: block;
	}
}
@media screen and (min-width: 960px) {
	.content.desktop {
		display: block;
	}
}

クラス名や画面幅の指定はお好みで編集してください。

Liquidを使いたい場合は上記CSSに加え、Snippetsに「responsive.liquid」を作成しcase/whenを使ってそれぞれのHTMLを書きます。

{% case responsive %}
	{% when 'mobile' %}
		
	{% when 'tablet' %}
		
	{% when 'desktop' %}
		
{% endcase %}

そして出力したい位置に 以下のようなHTMLを挿入し、それぞれのソースを出力します。

{% render 'responsive' with 'mobile' %}

{% render 'responsive' with 'tablet' %}

{% render 'responsive' with 'desktop' %}

Javascriptを使ったif分岐とかもできるかもしれませんが、この方法が最も簡単だと思います。