Bootstrap 3页打印手机版

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;
  }
}

330毫米和427毫米的尺寸恰好适合我的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

这是官方文档中提到的一个已知问题：

打印机视口

即使在某些现代浏览器中，打印也可能很奇怪。特别是，从 Chrome v32 开始，无论边距设置如何，Chrome 在打印网页时解决媒体查询时都会使用比物理纸张尺寸窄得多的视口宽度。这可能会导致 Bootstrap 的超小网格在打印时意外激活。有关详细信息，请参阅#12078。建议的解决方法：

• 拥抱超小网格并确保您的页面在其下看起来可以接受。
• 自定义 Less 变量的值@screen-*，以便您的打印纸被视为大于超小纸张。
• 添加自定义媒体查询以仅更改打印媒体的网格大小断点。