如何在bootstrap 3上切换到lg viewport进行打印预览？

Question

当我试图打印网站时，似乎引导程序的打印视图会自动切换到xs，是否有办法使打印视图成为lg视口？

就像是

@media print {
  .container {
    @media (min-width: $screen-sm-min) {
      width: $container-lg;
    }
    @media (min-width: $screen-md-min) {
      width: $container-lg;
    }
    @media (min-width: $screen-lg-min) {
      width: $container-lg;
    }
  }
}

Answer 1

大多数浏览器的打印都很棘手 - 问题在于，根据浏览器，默认纸张大小及其方向（纵向或横向），页面将以72ppi，96ppi或144ppi打印。

在Bootstrap中，媒体查询建立像素宽度带...例如“xs”介于544px-767px之间，因此根据（打印的）页面宽度，您的网站在打印时可能会恢复为“xs”或“sm”宽度变体。

你的尝试几乎是现场的...只是（记住我们无法预测打印的px宽度）我会考虑打印整页宽度，无论是否流体（即打印的页面总是流畅的）。

假设您可以访问源.less文件，请尝试类似......

@import "variables.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";

@media print {
  .container,
  .container-fluid {
    .container-fixed();
    width: auto;
    min-width: 750px;
  }
}