こんにちは、Nanayakuです。
今回は、Bootstrapで各デバイスのサイズにレスポンシブを合わせるため必要な「viewport」について解説します。
目次
viewportとは
viewportとは、
表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。
つまり、viewportを設定していない状態だと、Bootstrapをインストールしていてもデバイスのサイズごとにレスポンスが合わせる事が出来ないという事です。
1枚目はMacでの表示画面で、2枚目の画像は「viewport」を設定せず表示したGalaxyの画面です。
このように、レスポンシブが全くあっていません。
viewportの書き方
場所
viewportを書く場所は、app/views/layouts/application.html.erbの<head></head>に書きます。
自分は下記のように書きましたが、<head></head>の中ならどこでも大丈夫です。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
#↓
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
#↑
<title>パラリンク</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
・
・
・
書き方
今回は、各デバイスに合わせる書き方を紹介します。
「width=device-width」は、横幅をデバイスのサイズに合わせる書き方です。
「initial-scale=1」は、倍率を指定する書き方で意味は「width=device-width」と同じになりますが、initial-scaleを対応していないOSがあるため、どちらも書いておく方が安全です。
「shrink-to-fit=no」は、iOS9で上記の２つを書いていてもViewが崩れることがありますが、これを書くと正常に表示できます。
書いた後
「viewport」を指定した後は、画像のようにレスポンシブが合います。
参考サイト
- railsでbootstrapを入れてもiPhoneでレスポンシブにならない時 - Qiita
- コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて｜ferret
- iOS9でのみサイトデザインが崩れるときのメモ | うるおいらんど
まとめ
Bootstrapを導入したら、viewportを書き忘れないようにしましょう。
最後に
備忘録がわりに作ったので、間違っている所とかあったら、コメントくれると嬉しいです。
