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

web関連

2020.06.14

この記事は約1分で読めます。

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

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

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

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

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

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

これだけ！
簡単ですね！