在CSS中打印的媒体查询在Chrome 54+中打印缩小版本

6tdlim6h  于 2023-05-11  发布在  Go
关注(0)|答案(2)|浏览(133)

我正在使用@media print来设计一些标签。在Chrome 54+升级后,打印似乎是在一个按比例缩小的版本。元件之间的相对尺寸和距离保持相同;然而,当打印时,打印显示为缩小或按比例缩小。在Chrome 53上运行良好。知道为什么会这样吗

cdmah0mi

cdmah0mi1#

我遇到这个bug是因为我们的应用程序使用Bootstrap 3框架。我发现(实际上是偶然的),如果你有一个带有引导容器类的DIV来 Package 你的内容(在引导页面中很常见),这个bug就会被触发。一个简单的解决方法是通过在引导CSS之后添加以下CSS样式来强制容器在打印时为100%宽度。

@media print {
   .container {
      width: 100% !important;
      min-width: auto !important;
   }

}

这解决了我们的应用程序中Chrome 54中引入的打印大小问题。
我也向Chrome团队报告了这个bug,他们已经承认了。https://bugs.chromium.org/p/chromium/issues/detail?id=660058

htzpubme

htzpubme2#

这不是一个完整的修复,但它让我们运行我们的应用程序。这些是Chrome上的企业用户,打印文档和标签。
仅使用浏览器黑客针对Chrome。

// Chrome 54+ specific browser hack for printing
// http://browserhacks.com/#hack-ac2480b5c83038f2d838e2a62e28a307
@media print and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { body { zoom: 150%; } }

相关问题