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

投稿日:

やりたいこと

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

前提条件

Bulma 0.7.1で確認しています。

概要

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

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

マニュアル