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

解決済
salmon
新規メンバー
2 0 0

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

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

0 件の「いいね!」
mrtc
遊覧客
37 18 18

成功

その場合は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;
	}
}
<div class="content mobile"><!-- モバイル用コンテンツのHTML --></div>
<div class="content tablet"><!-- タブレット用コンテンツ --></div>
<div class="content desktop"><!-- デスクトップ用コンテンツ --></div>

 

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

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

 

{% case responsive %}
	{% when 'mobile' %}
		<!-- モバイル用コンテンツのHTML -->
	{% when 'tablet' %}
		<!-- タブレット用コンテンツ -->
	{% when 'desktop' %}
		<!-- デスクトップ用コンテンツ -->
{% endcase %}

 

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

 

<div class="content mobile">{% render 'responsive' with 'mobile' %}</div>
<div class="content tablet">{% render 'responsive' with 'tablet' %}</div>
<div class="content desktop">{% render 'responsive' with 'desktop' %}</div>

 

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