Bootstrap 3页打印手机版

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

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

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

解决方法

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

@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>

原文地址：https://www.jb51.cc/bootstrap/233883.html