Printing Bootstrap 3页打印移动版

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

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

是否有一种简单的方法可以告诉浏览器视口宽度是一个常规屏幕而不是一个电话（XS），或者我们必须合并许多复杂的网格更改等？

这是一个已知的问题：

打印机视口 即使在一些现代浏览器中，打印也可能很奇怪。特别是，从Chrome v32开始，无论页边距设置如何，在打印网页时解决媒体查询时，Chrome使用的视口宽度明显小于物理纸张大小。这可能会导致在打印时意外激活引导的超小网格。建议的解决办法：

• 拥抱额外的小网格，确保你的页面在它下面看起来可以接受
• 自定义

  @screen-*

  Less变量的值，使您的打印机纸张被视为大于超小
• 添加自定义介质查询以仅更改打印介质的网格大小断点

---

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

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

（功能（）{
var isChromium=！！window.chrome；
var beforePrint=函数（）{
警报（“针对Chrome浏览器优化了打印。”）；
};
if（window.matchMedia）{
var mediaQueryList=window.matchMedia（'print'）；
mediaQueryList.addListener（函数（mql）{
if（mql.matches&&！isChromium）{
打印前（）；
}
});
}
window.onbeforeprint=打印前；
}());

一些对我有用的东西

在bootstrap grid.scss中查找：

    @include make-grid(xs);

然后添加以下内容：

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

---

谢谢你，丽贝特。我们已经看到了关于这个问题的官方文件以及“#12078”上的帖子，但除了说明“自定义@screen-*Less变量的值”之外，我不确定我们需要将这些更改为什么，以便打印时假设视口的宽度至少为768px。对于许多开发人员来说，这无疑是一个主要问题。对于解决方案2，您不必试图在打印时弄乱使用的视口大小，而是更改网格，以便打印使用的任何视口大小都至少被认为是小的，而不是超小的。减少

@screen sm min

，直到打印停止生成额外的小版面。如何在BS4中修复此问题？有人能提供2和3的例子吗？这适用于Chrome，但不幸的是似乎对Firefox没有任何影响。只适用于小页面，因为这可以将页面内容扩展到纸张。还禁用打印方向