why don't print media queries cm measurements work consistently in every browser. let's want have 2 columns break 1 column if browser width smaller 500px (screen) or page smaller 190mm (print, a4 210mm).
the html pretty straight forward:
<div class="grid-item one-half"> first column </div> <div class="grid-item one-half"> second column </div> css:
/* full width */ .one-half { width: 100%; } /* a4 210mm */ @media screen , (min-width: 500px), print , (min-width: 190mm) { .one-half { width: 50%; } } .grid-item { float: left; } this code works fine in every browser (ie9+) if resize browser window. try print (cmd+p), different results , can't figure out why:
chrome (43, osx): shows 1 column, although used a4 paper settings (which 210mm). if change 190mm 143mm or less, shows 2 columns.
safari (8.0.7): shows 2 columns (as expected), if change 190mm 300mm (which far larger a4 paper), keeps showing 2 columns (up around 340mm).
firefox (36, osx): browser of 3 works expected.
to me seems if both chrome , safari kind of scaling, if try print page, a4 paper not 210mm. there way prevent this, media queries fire correctly?
although might not 100% reliable (<iframe>), put code in fiddle (https://jsfiddle.net/a1ye6tco/embedded/result/). can still see different results every browser.
Comments
Post a Comment