- SCSSをいじっている際にこいつを知らなくて不覚にもｳﾝ時間も溶かしたのでメモる。
- 雰囲気で読んでやってください
背景とやりたいこと
- Railsのアプリケーション(SPAでない)を開発中のお話。
- プレゼンテーション層はslim, scssファイルを使っている
- あるページにYouTuneの動画を埋め込む。これを、
モバイル機器では、画面の横幅一杯に表示したいタブレットとデスクトップでは幅520pxで表示したい。
解決策
(1)UserAgentによってhtmlにタグを付け分ける(最初やろうとしてた)
- アクセスした機器のUserAgentに応じて、Railsのviewファイルをレンダリングする際にタグを動的に付与する
- モバイル版では、以下のケースだとdivタグに
mobileクラスが加わる - なお、「リクエスト元のUserAgentがどの端末であるかを識別するロジックをアプリケーションの内部に自前で定義している」ことが必要ある
- モバイル版では、以下のケースだとdivタグに
page.html.slim
// @user_agent.mobile?とで、アクセス者がモバイルかを識別するdivclass="app-movie #{'mobile' if @user_agent.mobile?}"iframesrc="https://www.youtube.com/embed/xxxxxxxx"frameborder="0"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture""allowfullscreen
page.scss
.app-movie{iframe{width:100%;}&.mobile{iframe{width:520px;}}}CSSファイルの中でメディアクエリを使う(最終的にこっちを採用)
- 一発だった。
page.html.slim
divclass="app-movie"iframesrc="https://www.youtube.com/embed/xxxxxxxx"frameborder="0"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture""allowfullscreen
page.scss
app-movie{iframe{// TO読者: 閾値の設定はこの記事を参考にしないでください@mediascreenand(max-width:767px){width:100%;}@mediascreenand(min-width:768px)and(max-width:979px){width:520px;}@mediascreenand(min-width:980px){width:520px;}}}- メディアクエリの使い方をもう少し細かく知りたい時はこちらを参照しよう。
補足
- 「widthじゃなくてmax-widthを520pxに設定したらいいのではないか」と思ったりもしたが、iframeはデフォルトで幅300px, 高さ150pxが設定されており、スクリーンの横幅を広くして行っても、横幅が520pxにまで達することはないため、widthを設定した。
- これも知らなかったため、結構時間を溶かしてしまった