逆引きマニュアル: Bulma: iPadの縦向きをtabletとして扱う方法

投稿日: 2018-10-01

Bulma

iPad

やりたいこと

Bulmaのデフォルトでは、iPadの縦向きはmobileとして扱われます。これをtabletとして扱う方法です。

Bulma 0.7.1で確認しています。

mobileとして扱われるのは、以下の理由からです。

縦向きのiPadの幅は768px
Bulmaのデフォルトは、mobileは〜768px
- Responsiveness | Bulma: a modern CSS framework based on Flexbox

よって、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は以下になります。