今回のパートではViewportを追加してスマートフォン用のサービス開発環境を整えていきます。

学習キーワード

- Viewport
- デベロッパーツール

application.html.erbにViewportを追加

Viewportを導入することでスマートフォン用のスタイルを適用できます。

app/views/layouts/application.html.erbに以下のコードを追加してください。

app/views
└── layouts
    └── application.html.erb

これでviewportの設定は終わりです。

下記の動画のように

http://localhost:3000/ を開いて、メニューバーを開き検証を押してください。

するとデベロッパーツールが出てくるので、デベロッパーツールの左上にあるToggle devise toolbarを押すと、スマートフォンサイズのviewが表示されるようになります。

今回のカリキュラムではスマートフォン用に見た目を整えているので、上記の手順でデバッグしてください。