最近、風邪気味だった犬吉です。

A4印刷向けのWEBページのコーディングで、
サイトの横幅についてのメモ。

bootstrapのグリッドレイアウト

コーディングの際、bootstrapのグリッドレイアウトを使ってボックスを並べた。

これが裏目で見事に崩れた、それがbootstrapでの正しい挙動っぽかったので、変にbootstrapで粘るより、素直に全部float:leftなど使いながら書きなおした。

問題はサイトの横幅

ほとんどのブラウザは「縮小して全体を印刷する」がデフォなので、
横幅がどうだろうとイケる。
ただ、firefoxは違うようで縮尺100%でも大丈夫にする必要がでてきた。

まあ、運用で「縮小して全体を印刷する」って話なら関係ないわけですが。

A4印刷のpxサイズ

余白無しだと800pxほど。

余白を考慮してサイト幅640pxに修正した。

これで無事に解決するかと思ったが、一部のパソコンのfirefoxで見切れるという。

なので、

とまあ、こんな感じで「@media print」内で明示的に余白を指定した。
結果は、ほとんどのブラウザで反映された。

少なくとも、私が持っているwindowsとmac上の最新verの各種ブラウザでは反映された。

これが効かない環境があるっぽい。
会社のプリンターに合わせてプリント設定をカスタマイズしてるからなのか…

原因は分からない。

結局、横幅を再調整

結局620pxで組んだ。

わりとみんな印刷向けの調整はしないのか、調べても情報がすくないね。