Question

为什么不打印媒体查询，cm测量值在每个浏览器中都能正常工作。如果浏览器宽度小于500像素（屏幕）或页面小于190毫米（打印，A4为210毫米），我们希望有两列可以分为一列。

HTML很简单：

<div class="grid-item one-half">
  First column
</div>
<div class="grid-item one-half">
  Second column
</div>

CSS：

/* Full width */
.one-half {
  width: 100%;
}

/* A4 is 210mm */
@media screen and (min-width: 500px), print and (min-width: 190mm) {
  .one-half {
    width: 50%;
  }
}

.grid-item {
  float: left;
}

如果您调整浏览器窗口大小，此代码几乎适用于所有浏览器（IE9 +）。但是一旦我尝试打印它（CMD + p），我会得到非常不同的结果，我无法弄清楚原因：

Chrome（43，OSX）：仅显示一列，但我使用A4纸张设置（210mm）。只有当我将190毫米更改为143毫米或更小时，它才会显示两列。

Safari（8.0.7）：显示两列（按预期方式），但即使我将190毫米更改为300毫米（远远大于我的A4纸），它仍会显示两列（最大约340mm）。

Firefox（36，OSX）：只有所有三种浏览器都按预期工作。

对我而言，如果您尝试打印页面，Chrome和Safari似乎都会进行某种缩放，因此A4纸不是210mm。有没有办法阻止这种情况，以便媒体查询正确解决？

虽然这可能不是100％可靠（<iframe>），但我把代码放在一个小提琴（https://jsfiddle.net/a1ye6tco/embedded/result/）中。但是你仍然可以看到每个浏览器的不同结果。

打印媒体查询和cm

0 个答案: