iframeのGoogleマップを印刷したときに中心にしたい（特にIEとEdge）。けど印刷時の余白を設定して諦めた。
レスポンシブデザインを採用していると、A4で印刷すると横幅が狭くなるので「ここで改行してほしくない」と言われることもある。ウェブ上で完璧に仕上げてもそもそも画面で見ていない。
「画面ではぴっちり収まってます。普通は印刷しないので大丈夫です。」
と言う前に出来るだけ印刷してもいい感じになるようにしたときの覚書。
まずはブラウザごとにデフォルト値が違う余白の設定。
これだけでだいぶ違う。
@page {
margin: 5mm;
}
あとは@media printを使って地道に調整していく。
@media print {
#nav-area {display: none;}
}
特に困ったのが画面の横幅いっぱいにiframeでGoogleマップを表示しているページ。
印刷すると左部分しか表示されない。特にIEとEdge。Google Chromeは中心まで表示されるから許せる。
印刷したときのイベントを取得してJavaScriptで制御しようとしても、再表示やsrcの置き換えをしようとしてもうまくいかない。
参考： Detecting Print Requests with JavaScript
iframeではなくGoogle Maps JavaScript APIを使ってsetCenterすれば出来るかもしれない。けど使用制限があるので、普通のホームページで使いたくない。
拡大、縮小など試してみたけどダメ。
中途半端は逆効果になるのでやめた。
どうしても見た目通りに印刷したい場合は、サイズ固定の別ウィンドウを表示した方がよさそう。
もしくはウェブサイトを（サーバー側で）PDFにして表示してもいいかもしれない。
< Related Posts >