Bulma の -tablet クラスはデフォルトだと ipad に適用されない
タブレットとそれよりも小さい端末の場合のみ css を反映させたい場合、
is-flex-tablet のような helper が用意されており、これらを使うことでレスポンシブに作りやすくなります。
ただ1つ問題点があって、このヘルパーが適用されるのは Tablet Between 769px and 1023px となっています。
chrome の要素の検証から iPad を選択するとわかるのですが、iPad の幅が 768px になっています。
そのため、そのまま使用して、iPad の場合は~-tablet みたいな要素は適用されないです。(Pro は大丈夫だと思うけど)
issue では取り上げられているが...
同じような疑問を持ち issue を 作成してくれたユーザーがいましたが、それに対しての回答は下記のようでした。。。 その後すぐ close されているので、これに関しては変更される予定はなさそうです。
There’s the tablet variable that defines the breakpoint. And there’s the tablet mixin that means “from tablet breakpoint onwards”, in landscape mode. You can easily change the breakpoint value since it’s a Sass variable. This would actually update the mixin as well.
Google 翻訳するとこんな感じです。
ブレークポイントを定義するタブレット変数があります。また、横向きモードの「タブレットブレークポイント以降」を意味するタブレットミックスインもあります。 ブレークポイントの値はSass変数なので、簡単に変更できます。これにより、実際にミックスインも更新されます。
sass の変数を変更するしかない
$tablet: 768px; を scss ファイルに定義してあげれば動くようになります。
大変ではないからまだ良いのですが、これは bulma でやってくれよと思ってしまいました。。
