Question

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

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

是否有一种简单的方法可以告诉浏览器视口宽度是常规屏幕而不是手机（XS），还是我们必须包含大量复杂的网格更改等？

Answer 1

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

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

330mm和427mm的尺寸恰好适合我的1170px断点。（他们也是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>

Answer 2

对我有用的东西......

在bootstrap grid.scss中找到：

    @include make-grid(xs);

然后在下面添加：

    @media print {
        @include make-grid(sm);
    }

Answer 3

这是一个已知问题that's mentioned in the official docs：

打印机视口

即使在一些现代浏览器中，打印也可能很古怪。特别是，从Chrome v32开始，无论边距设置如何，在打印网页时解析媒体查询时，Chrome使用的视口宽度都比实际纸张尺寸窄得多。这可能导致Bootstrap的超小网格在打印时意外激活。 See #12078 for some details.建议的解决方法：


拥抱超小网格，确保您的网页在其下方可以接受。

自定义@screen-*个较少变量的值，以便将您的打印机纸张视为大于超小型。

添加自定义媒体查询以仅更改打印媒体的网格大小断点。

Bootstrap 3页打印手机版

3 个答案:

打印机视口