printing - Bootstrap 3页打印移动版

Question

当我们从基于 Bootstrap 3 的网站打印页面时，它们正在一些显示移动版本的浏览器上打印。我用谷歌搜索试图找到一个好的解决方案，但没有真正找到任何有效的解决方案。

在屏幕上使用相同的 CSS 并将“打印隐藏”类添加到特定的 DIV 中，我们的页面在 Mac 上使用 Safari 看起来不错，但在 Mac 上使用 Chrome 或在 PC 上使用 Firexof 和 Chrome，打印预览显示移动版本。

有没有一种简单的方法可以告诉浏览器视口(viewport)宽度是普通屏幕而不是手机 (XS)，还是我们必须合并许多复杂的网格更改等？

Answer 1

添加打印媒体查询对我有用。这是我最终偶然发现的。

@media print {
  @page {
    size: 330mm 427mm;
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}

330 毫米和 427 毫米的尺寸似乎适合我的 1170 像素断点。 (它们也是 8.5/11 的口粮。)

编辑:正如@tony-payne 所说，这可能只适用于 Chrome。在我的用例中，这很好。如果不在 Chrome 中，只需添加一个带有打印警告的脚本。

<script>
(function() {
  var isChromium = !!window.chrome;
  var beforePrint = function() {
    alert("Printing is optimized for the Chrome browser.");
  };
  if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
      if (mql.matches && !isChromium) {
        beforePrint();
      }
    });
  }
  window.onbeforeprint = beforePrint;
}());
</script>