【CSS】印刷用ページの幅が指定通りにならない

今回はメモ程度の簡単な記事です。

印刷用ページを作成中、どうしても幅が指定通りにならない状況に遭遇したので残しておきます。

原因

原因はBootstrapでした。

バージョン4系のBootstrapを使っている場合、印刷時にBootstrapが設定している以下のような印刷用スタイルがあたってしまうのが原因でした。

@media print {
    body {
        min-width: 992px !important;
    }
}

解決方法

Bootstrapのバージョンを5系にアップデートするか、対象のスタイルを以下のように上書きする事で解決できます。

@media print {
    body {
        min-width: auto !important;
    }
}

印刷時にだけ適応されるスタイルは、デベロッパーツールでも特別な設定をしないと見れないので、なかなか気付きませんでした。