こんにちは、Nanayakuです。 今回は、Bootstrapで各デバイスのサイズにレスポンシブを合わせるため必要な「viewport」について解説します。 viewportとは viewportとは、 表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。 コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて｜ferret つまり、viewportを設定していない状態だと、Bootstrapをインストールしていてもデバイスのサイズごとにレスポンスが合わせる事が出来ないという事です。 1枚目はMacでの表示画面で、2枚目の画像は「viewport」を設定せず表示したGalaxyの画面です。 このように、レスポンシブが全くあっていません。 viewportの書き方 場所 viewportを書く場所は、app/view
![[Rails]Bootstrap入れたら書けよ「viewport」 | Nanayaku blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/e4474441430579f5173bd6f0378e589ae6fd146a/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fnanayaku.com%2Fwp-content%2Fuploads%2F2019%2F09%2Fcloud-1910599_640.png)
最初に完成したデモ DEMO http://workshops.ddns.net/event_calendar/show 必要なものをダウンロード $ git clone https://github.com/Serhioromano/bootstrap-calendar.git jQuery, underscore.js, bootstrap コントローラーの生成 $ rails g controller event_calendar ルートの編集 $ viconfig/routes.rb # event calendar get 'event_calendar/show' resource :event_calendar ビュー 面倒なのでjavascriptも一緒に書いています $ vi app/views/event_calendar/show.html.erb <%= style
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
