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

**URL:** https://www.nocode-faq.com/t/topic/2467
**Category:** Adalo
**Created:** [2021 年 12 月 23 日午後 1:49 UTC](https://www.nocode-faq.com/t/topic/2467 "2021-12-23T13:49:10Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![tanasho\_metal2](https://avatars.discourse-cdn.com/v4/letter/t/e19adc/32.png) [@tanasho\_metal2](https://www.nocode-faq.com/u/tanasho_metal2)
#### Post date: [2021 年 12 月 23 日午後 1:49 UTC](https://www.nocode-faq.com/t/topic/2467/1 "2021-12-23T13:49:10Z")

</div>

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

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

 ![rapture_20211223223915](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/e7da4cf466e7a4884b7ee747f8dd326155346602.jpeg)  
スクリーンショット2  
 ![rapture_20211223223927](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/62eee284b6bc37bab71446f67948f7fcdb415381.jpeg)

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

 ![Screenshot_20211223-223340_Chrome](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/b29f0472d0b1e44f30f1a75d53de9e791fd62380.jpeg)  
スクリーンショット2  
 ![Screenshot_20211223-223350_Chrome](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/c804122b73179c35b9002b0cb347a1e2f6c75db1.jpeg)  
スクリーンショット3  
 ![Screenshot_20211223-223411_Chrome](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f03573051e86127e0c9d1ee49cd08332ac01c38c.jpeg)

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

---

<div class="post-metadata">

### Author: ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)
#### Post date: [2021 年 12 月 24 日午後 1:12 UTC](https://www.nocode-faq.com/t/topic/2467/2 "2021-12-24T13:12:53Z")

</div>

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

> **[Responsive Desktop Site | Voters | Adalo](https://adalo.canny.io/feature-requests/p/responsive-desktop-site)**

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

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

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

【参考】 [Responsive Build?]

> **[Responsive Build?](https://forum.adalo.com/t/responsive-build/4975)**
>
> Hello, We have competed a build on adalo and we are getting it ready for publishing on the Play store and Apple Store. The app looks fine on several phones but its all wrong on a tablet, all the images and buttons are the wrong shape and size - how...

---

<div class="post-metadata">

### Author: ![tanasho\_metal2](https://avatars.discourse-cdn.com/v4/letter/t/e19adc/32.png) [@tanasho\_metal2](https://www.nocode-faq.com/u/tanasho_metal2)
#### Post date: [2021 年 12 月 26 日午前 6:43 UTC](https://www.nocode-faq.com/t/topic/2467/3 "2021-12-26T06:43:11Z")

</div>

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