このご時世、URLを共有たり、スクリーンショットを撮って見せたりすることが多いのですが
サイトを印刷したい！！というユーザーさんも多いです。

例えば集まりでの資料として、海外のホテル予約情報の予備、メモを追加したいからプリントアウト…

そんなとき、レスポンシブでサイトを作っていると悲惨なことに…
試しにうちのサイトを「印刷する」で見てみると

んんんん！？？！？？！？なんでタブレットサイズになってるん？？

ちなみに結構大手のニュースサイトやメディアサイト、企業サイトでも同じ様になっています。

ここも、あそこも、だめだーー！
ちょっと見づらいですよね。

解決方法

印刷用のCSSを追加してPCサイズの横幅を指定してあげましょう！
CSSの追加場所はbodyタグの指定箇所より後ろならどこでもOKですが、なるべくCSSの最後の方がいいかもしれません。

@media print {
    body {
        width: 1400px !important;
        zoom: .8;
    }
}

※1400px　のところは自分のサイトに合わせてカスタマイズしてみてくださいね！

ドドーン！どうでしょうか。
めっちゃいい感じに印刷プレビューされています。
これで解決です〜！楽勝！！！

コピペその先へ

個人的には使わない機能もサイトを見てくれいる方からしたら必須の事もあります。
印刷に限らず配色なども本当は考えて作ったほうがよいのですが、アクセスビリティーの話になってくるのでまた今度！
行政のサイトなどはこのあたりまで考えて作成されています。
（作るときはめちゃめちゃ厳しいアクセスビリティーのチェックシートが来ます…しぬぅ）