BLOG

ブログ

不まじめなことも書いています。

レスポンシブサイトを印刷するとスマホレイアウトになる理由と対処法

2017.02.16

subordinate

これを書いたのは下っ端です。

インターコードの下っ端です。

弊社でレスポンシブサイトのコーディングをさせて貰う際に各画面サイズに対応させる為、
よく下記のようなCSSを使っています。


@media (max-width: 767px) { /*スマホレイアウト*/}
@media (min-width: 768px) { /*タブレットレイアウト*/}
@media (min-width: 992px) { /*PCレイアウト*/}
@media (min-width: 1200px) { /*PC大画面レイアウト*/}

どこかのレスポンシブサイトの作り方を解説するサイトで紹介されていた方式なのですが、
この書き方だと印刷時にスマホレイアウトになってしまうことに最近気づきました。
今現在インターコードのホームページがその仕様になっています。


↓実際に印刷するとこんな感じになります。↓

sample

いやはやお恥ずかしい。近々直します。

※2/18修正対応済

これを問題を解決する方法を試行錯誤しながら色々CSSを弄っていたのですが、
すごく簡単に済むことが分かりました。



それがこの書き方。このメディアクエリの設定を一部変更するだけ。


@media only screen and (max-width: 767px) { /*スマホレイアウト*/}
@media print, screen and (min-width: 768px) { /*タブレットレイアウト*/}
@media print, screen and (min-width: 992px) { /*PCレイアウト*/}
@media print, screen and (min-width: 1200px) { /*PC大画面レイアウト*/}

他のCSSは弄る必要がないので簡単ですねー。

BLOGを見る