LoginSignup
12
5

More than 5 years have passed since last update.

印刷用スタイルシートprint.cssを無理やりいい感じに横幅フィットさせてみた

Last updated at Posted at 2018-11-16

IEのプリントの挙動が不審者すぎる。。
なので、当てずっぽうですがIEを無理やり解決してみました。
印刷結果が完全にキレイというではないけれど、なんとかデフォルトでお客様に満足いただける挙動まで達成できました。

もっと数字的な根拠を交えた指定方法があるのなら、ぜひ知りたい。。。
でも、自分のリテラシーと工数では現状これが限界だった。。。

背景

デフォルトでは大きすぎるコンテンツを縮小して印刷させたいとの要望で始まった、プリント用css対応。激ハマりました。(主にIE対応が)

chromeは、なんとか意図したとおりに動いてくれたのですが、
IEは意図の逆をいく結果で大変、本当にハマりました。(2回目)

-- 背景の続きは後日記載 --

次回のために、これをタレにしようと思い今回も投稿しました。
以下コードです。(案件では、html上にmedia="print"としてprint.cssを読み込みました。)

今回使った解決方法

style.css
@media print {
    body {
        zoom: 0.68;
        -webkit-print-color-adjust: exact;
    }
}


/* IE10以上 */
@media print and (-ms-high-contrast: none) {
        /* @pageの指定いらないかも */
    @page {
        size: A4;
        margin: 12.7mm 9.7mm;
    }

    body {
        zoom: 1.8;
        width: 1200px;
        transform: scale(0.5);
        transform-origin: 0 0;
    }
}

最後に

もしもっと良い解決方法をご存知の方、ぜひ!!ぜひ!!!
コメントくださいませ。

12
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
5