【Rails】閲覧するデバイスによって反映させるビューを変えたい

Question

前提・実現したいこと

閲覧するデバイス（スマホ・PCなど）によって反映させるビューの内容を変えたいです。

現状

現在bootstrapを使用しcolを使いレスポンシブに対応させています。
ただPCメインに作ってしまっていたためスマホ画面で見ると縦に長くなりすぎてしまい少し不格好な形です。（下に画像貼ってます）

現状下記のような形でレスポンシブに対応させていますが、
そもそもデバイスによって反映する内容を変えることは可能でしょうか。

理想としてはカルーセルのような実装ができればと考えております。

もし考え方含めいい方法ご存知の方おりましたらご教示いただけますと幸いです。

該当のソースコード

#現在はこのようにしてデバイス対応しています
　<div class="row">
    <div class="col-lg-3 col-md-6 col-sm-6">
      コンテンツ
    </div>
  </div>

■PCデバイスの場合

■スマホデバイスの場合

これをカルーセルなどを使用して縦につらつらならないようにしたいです。

補足情報（FW/ツールのバージョンなど）

Rails 5.2.4.3
ruby 2.5.1

Comments

[no1knows]

> 閲覧するデバイスによって反映させるビューを変えたい
> 理想としてはカルーセルのような実装ができればと考えております。
> これをカルーセルなどを使用して縦につらつらならないようにしたいです。

質問は、PC表示のときは既存のままで、スマホ表示はカルーセルにしたいということでしょうか？

[yastinbieber]

コメントありがとうございます。

> 質問は、PC表示のときは既存のままで、スマホ表示はカルーセルにしたいということでしょうか？

わかりづらく申し訳ございません。
仰るとおりです。

スマホで閲覧する際カルーセルなど表示を変えたいと考えております。

Answer 1

Bootstrapについて詳しくないので僕ならこうやりますという考え方だけ回答します。

・現状のコードの下にカルーセルのコードを書く
・それぞれをDisplayPropertyでデバイスにあわせて表示・非表示を変更

DisplayProperty：https://getbootstrap.jp/docs/4.3/utilities/display/#hiding-elements

---

理由として
・シンプルに実装できる。
・Railsはバックエンドなので、解像度を取得するのは難しい。（というかRailsだけではできないはず）
・現状＋カルーセルを実装してもデータ量はわずかしか変わらないので、パフォーマンスへの影響がとても小さい。

Comments

[yastinbieber]

ありがとうございます！
希望通りに実装することができました。

[no1knows]

それは良かったです！