【Rails】Bootstrapのスマホへの適用方法

みなさんこんにちは。tekute-kuです。

今回はBootstrapについての記事です。

Bootstrapをすでに適用しているとき、あることをしないとレスポンシブデザインがスマホには反映されません！

記事を書いた目的

Bootstrapを使ってアプリを作っていて、Herokuにデプロイできたのでスマホで確認したところ、レスポンシブデザインが反映されておらず、とても小さい表示になってしまいました。

そこでBootstrapをスマホに対しても反映させる方法を調べてみましたので、みなさんにも紹介したいと思います！

＜head＞タグに一文を追加するのみ

この問題を解決するには＜head＞タグに以下の文を追加するのみです。

<meta name="viewport" content="width=device-width, initial-scale=1">

Railsの場合、<head>タグはapplication.html.erb

にありますのでそちらに記述します。

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    .
    .
    .
    .
    .
    .
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
    .
    .
</html>

これで再度デプロイすればスマホにも反映されているはずです。

まとめ

Bootstrapは、レスポンシブデザインのためスマホに合ったサイズに勝手に合わせてくれるとばかり思っていましたが、上の文を追加しなければいけないんですね。

 

参考：

【Rails】Herokuにデプロイ後もスマホ表示が小さいときの対処法〜Bootstrap適用済みの場合〜

 

 

コメント