やりたいこと
Bulmaのデフォルトでは、iPadの縦向きはmobileとして扱われます。 これをtabletとして扱う方法です。
前提条件
Bulma 0.7.1で確認しています。
概要
mobileとして扱われるのは、以下の理由からです。
- 縦向きのiPadの幅は768px
- Bulmaのデフォルトは、mobileは〜768px
よって、Bulmaのデフォルトのmobileを〜767pxにすればOKです。
この定義は node_modules/bulma/sass/utilities/initial-variables.sass
に以下のように定義されています。
$tablet: 769px !default
何で769なのかというと、 node_modules/bulma/sass/utilities/mixins.sass
に書かれているように、
mobileのmax-widthには-1した値が使われているからです。
=mobile
@media screen and (max-width: $tablet - 1px)
@content
手順
以下のように上書きすればOKです。
@charset "utf-8";
$tablet: 768px;
@import "../../node_modules/bulma/bulma.sass";
ここではiPadだけ考えているので1pxだけ小さくしていますが、 他の値でもOKです。
補足
BulmaプロジェクトでのIssueは以下になります。