レスポンシブサイトを印刷する際にスマホ表示になってしまう問題を解決する

レスポンシブサイトのサイトで印刷する際に、スマホ表示になってしまう場合がある。
そこでレスポンシブサイトを印刷する際にPC表示で印刷する方法を紹介します。

レスポンシブサイトを印刷する際にスマホ表示になってしまう問題を解決する

では、早速問題を解決していきます。
今回の原因として、レスポンシブサイトのメディアクエリの書き方です。

普段レスポンシブサイトで使用しているメディアクエリ

普段レスポンシブサイトで使用しているメディアクエリはこちら。

@media (max-width:640px){
}

この書き方の場合、SPの表示になってしまうようです。
そこで、今回は下記の書き方に変更することで、今回の問題であるレスポンシブサイトの印刷時にPCで印刷することができるようになります。

印刷時PC表示にするためのメディアクエリ

@media only screen and (max-width: 640px){
}

これだけ！
簡単ですね！