>プログラミング[Rails]Bootstrap入れたら書けよ「viewport」2019年9月7日こんにちは、Nanayakuです。今回は、Bootstrapで各デバイスのサイズにレスポンシブを合わせるため必要な「viewport」について解説します。表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。コピペで済ませていませんか?改めて学び直したい「Viewport」のすべて|ferretつまり、viewportを設定していない状態だと、Bootstrapをインストールしていてもデバイスのサイズごとにレスポンスが合わせる事が出来ないという事です。1枚目はMacでの表示画面で、2枚目の画像は「viewport」を設定せず表示したGalaxyの画面です。このように、レスポンシブが全くあっていません。場所viewportを書く場所は、app/views/layouts/application.html.erbの<head></head>に書きます。自分は下記のように書きましたが、<head></head>の中ならどこでも大丈夫です。今回は、各デバイスに合わせる書き方を紹介します。「width=device-width」は、横幅をデバイスのサイズに合わせる書き方です。「initial-scale=1」は、倍率を指定する書き方で意味は「width=device-width」と同じになりますが、initial-scaleを対応していないOSがあるため、どちらも書いておく方が安全です。「shrink-to-fit=no」は、iOS9で上記の2つを書いていてもViewが崩れることがありますが、これを書くと正常に表示できます。「viewport」を指定した後は、画像のようにレスポンシブが合います。うるおいらんどまとめBootstrapを導入したら、viewportを書き忘れないようにしましょう。最後に備忘録がわりに作ったので、間違っている所とかあったら、コメントくれると嬉しいです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。関連記事sampleで作ったHTML・CSSトップページを作成で書いたHTML・CSSのコードです。こんにちは、Nanayakuです。今回は、環境構築(Cloud9)について解説していきます。spec]form_withに変更した時のエラーの対処法こんにちは、Nanayakuです。spec(fill_in)でエラーが起きたので、その対処法を紹介します。...[Rails・Docker]初めてのRSpecこんにちは、Nanayakuです。今回は、Docker環境で自分が行ったRSpecの導入から実行までの流れを紹介します。...[Rails]rubocopでコードをキレイに整えるこんにちは、Nanayakuです。今回は、rubocopと言うGemを使用してコードをキレイに整える方法を紹介します。boostを受講し、プログラマーへ転職しました。2020年2月からSES企業に入社。boostやプログラミングなど興味があることを発信していきます。AFFINGER5.。