####疑問
AとBという2つのコンポーネントを用意し、Aはタブレット以上で表示・Bはスマホ以下で表示させたい。
そこでvuetifyのbreakpoint、hidden-{breakpoint}-{condition}
を使用して表示を切り替えたいと思いました。
参照:Vuetifyで画面サイズに応じて要素を非表示にする
以下のように指定すると上手く行きそうです。
<A class="hidden-xs-and-down" /> <B class="hidden-sm-and-up" />
結果
コンソールログで確認したところ
Aはスマホ・タブレットともに表示されており、Bはタブレット以上は表示されておりません。
ドキュメントではXSは600px以下とのことですから、スマホの画面(375px)では表示はされないはずです。
以上のことから
コンソールログで確認できるエミュが信用できないのか
そもそもスマホの解像度は375pxではないのか
弄っていないはずの設定をいじってしまっているのか
が分かりますが、対策がわかりません。
またこれに限らず、どうもvuetifyはスマホとタブレットの境がないような気がします。
解決方法をご存じの方いらっしゃいましたら、お手伝い頂けますでしょうか。
あなたの回答
tips
プレビュー