Adaloでのスマホとタブレットの表示の最適化について

Adalo
1

私は今adaloで食べログのようなアプリを製作しています。
アプリ自体は完成したのでそれをWebでも見れるようにしようと思い、adaloのdesktop web appでWEB版のポータルサイトを作成しています。
デザインはシンプルに都道府県別で検索するまたはキーワードで検索するだけなので簡単に作れたのですがスマホで表示するとレイアウトが整わずすごく見づらくなります。

PCで開いた場合
スクリーンショット1

rapture_20211223223915
rapture_202112232239151915×886 72.5 KB

スクリーンショット2
rapture_20211223223927
rapture_202112232239271916×891 78.5 KB

スマホで開いた場合
スクリーンショット1

Screenshot_20211223-223340_Chrome
Screenshot_20211223-223340_Chrome1080×2220 166 KB

スクリーンショット2
Screenshot_20211223-223350_Chrome
Screenshot_20211223-223350_Chrome1080×2220 104 KB

スクリーンショット3
Screenshot_20211223-223411_Chrome
Screenshot_20211223-223411_Chrome1080×2220 62.4 KB

なので、スマホで開いた時も見やすいようにレイアウトしたいのですがスマホで同じリンクを踏んだ時にスマホ用のレイアウトを表示させる方法はありますか？

2

デザインデバイスごとの切り分け難しいですよね。残念ながらAdaloのデフォルトの機能だとありません。

ただ、有料のコンポーネントで、
nocodemonkey に Device Detector があるので、こちらで、Mobile,Tablet を検出するコンポーネントがあるので、

デバイス検出 →それぞれのページへ移動する ということになると思います。

【参考】Device Detector
https://www.nocodemonkey.io/components/device-detector

【参考】 [Responsive Build?]

3

ご回答ありがとうございます！
デバイスを検出できるコンポーネントがあるんですね。
検討してみます。

「いいね！」 1