iframeのGoogleマップを印刷したときに中心にしたい（特にIEとEdge）。けど印刷時の余白を設定して諦めた。
病院や組織のホームページを作っていて「確認してください」というと、ウェブサイトを印刷して紙で確認（回覧）する。 レスポンシブデザインを採用していると、A4で印刷すると横幅が狭くなるので「ここで改行してほしくない」と言われることもある。ウェブ上で完璧に仕上げてもそもそも画面で見ていない。 「画面ではぴっちり収まってます。普通は印刷しないので大丈夫です。」 と言う前に出来るだけ印刷してもいい感じになるようにしたときの覚書。 まずはブラウザごとにデフォルト値が違う余白の設定。 これだけでだいぶ違う。 参考： @page - CSS | MDN @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 > Bootstrap3のWEBページを印刷してもいい感じに PHPでPDF生成するためにwkhtmltopdfをインストール
