演示

Question

我有以下页面：

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div class="container">
      <div class="row">
          <div class="col-xs-12 col-sm-6">
              <p>Column 1,1 in small row 1 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 1,2 in small row 2 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 2,1 in small row 3 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 2,2 in small row 4 in xs</p>
          </div>
      </div>
    </div>
  </body>
</html>

该页面在查看时按预期显示（即，在小屏幕上有2列2行，在移动设备上有4行），但是问题出在尝试打印时。

当我在Chrome中执行CTRL + P时，会得到以下预览：

页面尺寸设置为A4。在Firefox中不会发生此问题（但在IE和Edge中也会发生）

有什么想法如何使打印视图呈现小（或中）布局而不是移动视图？

Answer 1

演示

https://so51099397.surge.sh/

（我觉得已经实施的修复工具有点过多，但是我认为没有其他方法可以解决此问题）

（如果您想知道为什么我托管一个站点而不是我在评论中解释过的SO片段或jsfiddle之类的东西）

说明

我为什么要打印“移动”视图？

width of A4 = 210mm ≈ 8.27 in ≈ 595 px (72 dpi)
xs适用于width < 768px
从技术上讲，chrome在做什么是正确的，而其他浏览器在做什么是不正确的

如何解决此问题？

引导程序以mobile-first模式编写。
表示样式表的含义如下：

    .col-xs-12 {
        width: 100%;
    }
    @media (min-width: 768px){
        .col-sm-6 {
            width: 50%;
        }
    }

现在，如果我仅在打印过程中以某种方式解开@media (min-width: 768px)中的规则，我的问题就会解决。
要实现此目的，我们将使用@media (min-width: 768px)来获取document.styleSheets内部的所有规则（不要忘记在引导程序crossorigin="anonymous"中添加<link>，否则您会在访问样式表）
一旦有了所有这些样式，我们就会将它们包装在<style>中，并在<head>事件中附加在beforeprint中
在afterprint事件中，我们将删除该<style>

代码（与演示相同）：

window.addEventListener("beforeprint", function(){
    let printStyleSheet = document.createElement("style");
    printStyleSheet.classList.add("print-stylesheet");
    document.head.appendChild(printStyleSheet)

    let printRulesText = "";
    Array.from(document.styleSheets).forEach(styleSheet => {
        Array.from(styleSheet.cssRules)
        .filter(rule => rule.media && /(min-width: 768px)/g.test(rule.media.mediaText))
        .forEach(rule => {
            Array.from(rule.cssRules).forEach(rule => printRulesText += rule.cssText)
        })
    })
    printStyleSheet.innerHTML = printRulesText;
})
window.addEventListener("afterprint", function(){
    Array.from(document.querySelectorAll(".print-stylesheet")).forEach(style => style.remove())
})

注意：如果要使用中型桌面视图（md），则必须同时打开min-width: 768px和{{ 1}}同样适用于大型台式机（lg）

可以吗？

它适用于问题中的代码
它也应该适用于其他组件。

我可以在打印过程中应用min-width: 992px来解决此问题吗？（如769> 768）

否，因为媒体查询仅在html, body { width: 769px }上而不是在html或body的宽度上起作用，所以它将不起作用

好吧，我可以在打印过程中附加viewport并删除其他视口元吗？（如769> 768）

嗯...不。它不起作用。（我认为应该可以，但是不起作用）

还有其他修复程序吗？

像@Arex一样手动覆盖<meta name="viewport=" content="width=769">样式
获取引导CSS源代码并使用xs媒体查询对其进行修改，如下所示：
```
print
```
使用.col-xs-12 { width: 100%; } @media (min-width: 768px){ .col-sm-6 { width: 50%; } } /* add such rules everywhere */ @media print{ .col-sm-6 { width: 50%; } }将当前页面的所有内容放入iframe中，并制作其他所有内容width: 100%; height: 100%; border: none;。但是我觉得这是行不通的，因为如果display: none;获得滚动条，则视图中的内容将不会被打印。看起来也更黑了

PS：这很明显，但是让我明确地说一下……实现的修复（如演示中所示）不仅解决了网格系统或问题中的代码片段，而且修复了行为通过伪造iframe媒体查询来选择所有组件（按钮，表格，输入，网格等）。这就是OP想要的。没有单独固定组件

Answer 2

使用@media print来解决此问题。如果您打印预览，它将显示sm的布局。

这是工作代码：

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <style>
        @media print
        {
            .col-xs-12
            {
                width:50%;
                float:left;
            }
        }
        
    </style>
  <div class="container">
      <div class="row">
          <div class="col-xs-12 col-sm-6">
              <p>Column 1,1 in small row 1 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 1,2 in small row 2 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 2,1 in small row 3 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 2,2 in small row 4 in xs</p>
          </div>
      </div>
    </div>
  </body>
</html>

我希望这会有所帮助。

打印中断引导程序布局

2 个答案:

演示

说明