RailsアプリをHerokuにデプロイしてもスマホ表示が小さくなったときの対処法【Bootstrap適用済みの場合】




 

HerokuにRailsアプリをデプロイできた!

アプリが動いた!

パソコンで動作確認できた!

よっしゃ、最後にスマホで確認だ!

 

そんなフレッシュな勢いでスマホでHerokuアプリにアクセスしてみると「ある異変」に気づきました。

それは、

スマホでサイトの表示が小さくなっている

ということ。

次のようにスマホの画面の枠に対して明らかに小さく表示されているのです。

当初、ぼくの頭のイメージではスマホの画面幅に合わせて適切に表示される予定でした。

 

いやあ、なんでだろう。

Bootstrapは適用済みなのに・・・・!

 

こんなはずじゃなかった、という思いから調べてみたら、こちらの神記事を発見。

どうやら、次の1行の記述を<head>ダグに入れていないとこうなってしまうようです。

Railsアプリでいうと、<head>タグはapplication.html.erbというファイルに記述されていますね。

そこのheadタグ内に

を追記して上書き保存し、デプロイし直しです。

すると、サイト表示がレスポンシブデザインになり、スマホでも画面いっぱいに表示されるようになりました。

いくらBootstrapをRailsアプリに適用しても、あの1行をheadタグに書かない限り、スマホでは小さく表示されるのです。

 

ただ、

という1行を理解せずに使い続けるのもなああと思い意味を調べてみました。

 

が、正直、難しくてわかりませんでしたね。

僕と同じように、この1行をコピペして素通りする人が多いようです。

ちょっと一旦、今日のところはスルーして見逃しておきますが、また体力がある時にこの1行の意味を確認したいと思います。

 

それでは!

Lin

Pocket
LINEで送る




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍




コメントを残す

メールアドレスが公開されることはありません。