当我们从基于 Bootstrap 3 的网站打印页面时，它们会在显示移动版本的某些浏览器上打印。我已经用 Google 搜索过，试图找到一个好的解决方案，但并没有真正找到任何有效的解决方案。
对屏幕使用相同的 CSS 并将“print-hidden”类添加到特定的 DIV，我们的页面在 Mac 上使用 Safari 看起来不错，但在 Mac 上使用 Chrome 或在 PC 上使用 Firexof 和 Chrome，打印预览会显示手机版。
是否有一种简单的方法可以告诉浏览器视口宽度是常规屏幕而不是手机 (XS)，还是我们必须合并许多复杂的网格更改等？
【问题讨论】：
标签： printing twitter-bootstrap-3 printing-web-page
添加打印媒体查询对我有用。这就是我最终偶然发现的。
@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>
【讨论】：
对我有用的东西...
在引导 grid.scss 中找到：
@include make-grid(xs);
然后在下面添加：
@media print {
@include make-grid(sm);
}
【讨论】：
这是一个已知问题that's mentioned in the official docs：
打印机视口
即使在某些现代浏览器中，打印也可能很奇怪。特别是，从 Chrome v32 开始，无论边距设置如何，Chrome 在打印网页时解析媒体查询时使用的视口宽度明显小于物理纸张尺寸。这可能会导致 Bootstrap 的超小网格在打印时被意外激活。 See #12078 for some details. 建议的解决方法：
- 采用超小网格并确保您的页面在其下看起来可以接受。
- 自定义
@screen-*Less 变量的值，以便您的打印纸被认为是大而不是特小。- 添加自定义媒体查询以仅更改打印媒体的网格大小断点。
【讨论】：
@screen-sm-min 直到打印停止生成超小布局。