为什么用 Chrome 打印的网站使用移动布局？答案

【问题标题】：Why website printed with Chrome is using mobile layout?为什么用 Chrome 打印的网站使用移动布局？
【发布时间】：2015-03-24 21:55:46
【问题描述】：

在 Chrome 中，当打印到 A4 纸时，它以 568px 媒体查询宽度呈现。

尝试打印响应式网站，例如 The Verge 或 Bootstrap，您会在预览中看到它正在使用移动版式（见下图）。

在 Firefox 中，它使用大约 900 像素（见下图）。

有没有办法让它打印桌面布局？

我知道我可以通过将我的移动断点更改为 568 像素来解决这个问题，但我需要我的网站在 iPad 上打破 768 像素。

【问题讨论】：

【解决方案1】：

Verge不使用移动布局进行打印。它使用自己的打印布局。如果您在模拟print 媒体的同时检查页面，您将看到大量media="print" 声明。这是通过 HTML 加载的：

<link href="..." media="print" rel="stylesheet" type="text/css">

如果您希望网站在打印时与在移动设备上看起来不同，只需在移动媒体查询中指定 screen：

@media screen and (max-width: 768px) {
    ...
}

打印时，screen 声明将被忽略，从而完全忽略您的移动媒体查询。

【讨论】：

【解决方案2】：

只需将其添加到您的样式表中

@media print {
  @page {
    size: 330mm 427mm;
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}

【讨论】：