レスポンシブデザインの印刷CSS

Question

レスポンシブデザインの印刷CSSに関して質問です。
表示をメディアクエリで3段階に切り分けていますが、GoogleChromeで印刷すると表示中のブラウザ幅に対応したスタイルではなく、一番小さいメディアクエリのスタイルで印刷されてしまいます。（IEやFirefoxではブラウザに近い印刷結果になります）
GoogleChromeでブラウザ幅の時のスタイルを適用したまま印刷をしたいのですが、どのような方法があるでしょうか？

Answer 1

google で "レスポンシブ 印刷" を検索した結果から いくつかのページを紹介します。

• レスポンシブで制作したWebサイトを印刷しようとしたら、レイアウトが崩れてる！ http://office7f.com/2014/08/31/responsive-print/

...
@media only screen and (min-width: 768px) { }

レスポンシブ対応するときのよくあるメディアクエリの書き方ですよね。
この「only screen」ってやつが悪さをしてます。
読んで字の如く、「画面のみ」指定になっているんです。だから印刷時にはこのスタイルが無視されてしまってました。
なので記述を修正です。

@media print, screen and (min-width: 768px) { }

これで印刷時にもスタイルが適用されます。

• ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ http://coliss.com/articles/build-websites/operation/css/css-style-for-print-media-by-responsivedesignis.html

• Print responsive website in a desktop layout http://stackoverflow.com/questions/24196437/print-responsive-website-in-a-desktop-layout

• Making Your Site Printable: CSS Summit 2014 - SlideShare http://www.slideshare.net/aardrian/css-summit-2014-making-your-site-printable

Comments

[makomako]

回答ありがとうございます。
日本語サイトは情報が少ないようですね。英語で探してみます。