媒体查询打印在CSS打印按比例缩小版本在Chrome 54+

media query for print in CSS prints scaled down version in Chrome 54+

本文关键字：打印 版本 Chrome 缩小 CSS 查询 媒体 按比例      更新时间：2023-09-26

我使用@media print来设计一些标签。在Chrome 54+升级后，打印似乎是一个缩小的版本。元素之间的相对大小和距离保持不变;然而，打印时显示缩小或按比例缩小。在Chrome 53上工作良好。知道为什么会这样吗?

我遇到了这个bug，因为我们的应用程序使用了Bootstrap 3框架。我发现(实际上是偶然的)，如果您有一个DIV与引导容器类包装您的内容(常见的bootstrap页面)，这个错误将被触发。一个简单的解决方法是通过在你的bootstrap 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

这不是一个完整的修复，但它让我们运行我们的应用程序。这些是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%; } }
相关文章：