みずラテ

牛乳と水を2対1で。

【Rails】Semantic UIがスマホレイアウトにならない問題を解決する

Semantic UIをRailsに導入しようとして、ハマったところを記録しておきます。

事象

スマホレイアウトにしたいのに、PCレイアウトのままスマホと認識してくれない。

環境

rails 5.2.1
semantic-ui-sass 2.3.3.0
jquery-rails 4.3.3

手順

まずは、gemをインストールします。


gemfile

gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass'
gem "jquery-rails"

jQueryをインストールまだしていない人はこのタイミングで一緒に入れてしまいましょう。


コマンドライン

bundle install

インストールします。

続いて、application.scssにimportする。

@import "semantic-ui";


次はapplication.jsに以下を追加

//= require jquery
//= require jquery_ujs
//= require semantic-ui

jQueryとSemantic UIを使用するという文言です。

ここまでやったがスマホレイアウトにならない

ここまではググってその通りに進めたのですが、色々試してもスマホレイアウトにならない・・・

解決

htmlのヘッダーに以下のmetaタグを挿入することで、端末の表示領域が設定されて、スマホレイアウトが読み込めるみたい。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

超基本みたいですが、ハマるときはハマる!



Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

  • 作者:山田 祥寛
  • 出版社/メーカー: 技術評論社
  • 発売日: 2017/04/14
  • メディア: 大型本