为什么印有 Chrome 的网站使用的是移动布局？

Question

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

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

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

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

我知道我可以通过将移动断点更改为 568px 来解决此问题，但我需要我的网站在 iPad.

中以 768px 断点

Answer 1

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

加载的

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

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

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

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

Answer 2

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

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